We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

Keydown event

Thread ID:

Created:

Updated:

Platform:

Replies:

143428 Mar 19,2019 07:11 PM UTC Mar 21,2019 10:30 AM UTC jQuery 3
loading
Tags: ejRTE
Javier Linares
Asked On March 19, 2019 07:11 PM UTC

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

Prince Oliver [Syncfusion]
Replied On 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 


Javier Linares
Replied On 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.

Prince Oliver [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon