1. Home
  2. Forum
  3. jQuery
  4. Keydown event

Keydown event

Hello,
I am trying to format the writing based on regular repression, however when the change is made, the cursor is set at the beginning of the text, how can I fix this?
Thanks.


 <textarea   id="rteSample">     
<b>Description:</b>
        <p>The Rich Editor {:javier} (RTE) control is easy to render in the
        client side. Customers can easily edit the contents and get the HTML content for
        the displayed content. A rich text editor control provides users with a toolbar
        that helps them to apply rich text formats to the text entered in the text
        area. </p></textarea >

$("#rteSample").ejRTE({       
showContextMenu:false,
showToolbar:false,
      create: function(args){
         var texto = this.getHtml();
         var nuevotexto = texto.replace(/{:(.*?)\}/g,'<span style="color:blue">{:$1}</span>');
         this.setHtml(nuevotexto);
      },
        keydown: function(args) {   
          var texto = this.getHtml();
          var nuevotexto = texto.replace(/{:(.*?)\}/g,'<span style="color:blue">{:$1}</span>');          
          this.setHtml(nuevotexto);
        }
    });


full code:
https://jsplayground.syncfusion.com/5oqc4sq0

3 Replies
PO Prince Oliver Syncfusion Team March 20, 2019 11:38 AM UTC

Hello Javier, 

Good day to you. 

We have checked your shared code and example. You have replaced the content of RTE in the create and keydown events of RTE using setHtml method. The setHtml() method will clear the existing content of RTE and replace it with the new content. So, the cursor position will also be cleared along with the previous content. The cursor position will not be maintained, and it will be moved to the beginning of the content by default. Since the Keydown event will be triggered for each key down action inside RTE and the same HTML is replaced every instance and hence the cursor issue occurs.  

We need more details on your scenario and your requirement to validate the use case. This will help us provide a prompt solution that best suits your requirement.  

Thanks, 
Prince 


JL Javier Linares March 20, 2019 04:26 PM UTC

I basically use the RTE to change the color of the text while typing, similar to what happens in a code editor.

PO Prince Oliver Syncfusion Team March 21, 2019 10:30 AM UTC

Hi Javier,  
 
Thanks for the information. 
 
Since the issue occurs because the span element is continuously added upon each key down action. So based on your requirement, we suggest you add the span element with style after checking whether it already exists on not. Please find the modified code below 
 
keydown: function(args) { 
    var loc = this._getRange(); 
    offset = loc.startOffset; //get cursor position 
    var texto = this.getHtml(); 
    var nuevotexto = texto.replace(/{:(.*?)\}/g, '<span style="color:blue">{:$1}</span>'); 
    txt = $(this.getDocument()).find("body p")[0];          // get the first paragraph in RTE content                   
    if (txt.children[0] && txt.children[0].nodeName == "SPAN" && txt.children[0].style.color == "blue") { 
        return; 
    } 
    else { 
        this.setHtml(nuevotexto); 
        range = this.createRange(); 
        range.setStart(txt.lastChild, offset); 
        range.setEnd(txt.lastChild, offset); 
        this.selectRange(range); //set cursror position 
    } 
} 
 
 
For further reference, please refer to the below UG links to find the current cursor position and place cursor in specified location 
 
 
Also, if you are looking to highlight the content based on the syntax used inside RTE. Please refer to the demo link below. 
 
 
In the above sample, 
  • Click Insert code tool in RTE.
  • Choose the required type (JS or HTML or CSS)
  • Then enter the content to be inserted in that format inside textarea of Dialog. 
  • After clicking the Insert button, the content will be inserted with required styles from CodeMirror.
 
If this is your requirement then you can load Code mirror CSS file into iFrame along with some script reference. Please refer to the below links for further details on this scenario 
 
 
We would also like to let you know that we have EJ2 RichTextEditor , where the “Code View” tool will automatically show the content of RTE with code mirror view.  Please refer to the below given link 
 
 
In the above demo, Click on the code view icon to check this 
 
 
Let us know if you need any further assistance on this. 
 
Regards, 
Prince 


Loader.
Up arrow icon