Keydown event

[Javier Linares]

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]

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]

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

[Prince Oliver]

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 

    } 

} 

 

Sample link: https://jsplayground.syncfusion.com/uwv55kh0 

 

For further reference, please refer to the below UG links to find the current cursor position and place cursor in specified location 

 

https://help.syncfusion.com/js/richtexteditor/howto#find-the-current-cursor-location-in-rte  

https://help.syncfusion.com/js/richtexteditor/howto#set-the-cursor-at-the-specific-location  

 

Also, if you are looking to highlight the content based on the syntax used inside RTE. Please refer to the demo link below. 

 

https://asp.syncfusion.com/demos/web/richtexteditor/customtool.aspx  

 

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 

 

https://stackoverflow.com/questions/26204143/change-text-color-while-typing?answertab=active#tab-top  

https://stackoverflow.com/questions/31773765/how-to-incorporate-codemirror-into-my-project  

https://codemirror.net/ 

 

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 

 

https://ej2.syncfusion.com/javascript/demos/#/material/rich-text-editor/tools.html 

 

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