Determine Cursor position WITHIN Existing Text in the RTE

[Mike Potratz]

I have an application where the users need to use the 1/4, 1/2 and 3/4 fractional values.  Yes, I know they can just type that in, but they would like the actual "small" characters (¼ &frac12 and &frac34).  

What I currently have is this which works just fine as it just tacks on the fractional character at the end of the string, but before any </p> or </div> value.

tempWorkingText = rte_TrimDefectCriteria.Value
tempWorkingNumber = tempWorkingText.LastIndexOf("</", tempWorkingText.Length - 1)
tempRTEContent = tempWorkingText.Insert(tempWorkingNumber, "&frac12;")
rte_TrimDefectCriteria.Value = tempRTEContent

  

But if they type something in and then place the curser back into the text with the goal of inserting the value something other than the end.

Is there a way to determine/capture where the cursor is and insert the fractional character at that point?  Thanks! 

[Prince Oliver]

Hi Mike,  

 

Thank you for contacting Syncfusion support.  

 

Based on your update, it seems your requirement is to insert content at current cursor location. Then we suggest you use pasteContent() method of RTE to insert required html content at current cursor position. Please refer to the below given code 

 

<script> 

        function Insert() { 

            var instance = $("#<%=TrimDefectCriteria.ClientID%>").data("ejRTE"); 

            instance.pasteContent("&frac12;"); 

        } 

    </script> 

 

Kindly refer to the following API reference: https://help.syncfusion.com/api/js/ejrte#methods:pastecontent  

 

We have prepared a sample based on your requirement. Please find the sample at the following location: 

http://www.syncfusion.com/downloads/support/forum/143204/ze/RichTextEditor1568017316  

 

Kindly refer to the following UG link to find the current cursor position  

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

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Prince 

[Mike Potratz]

Afternoon,  Thanks for the quick reply.  Went through the sample code, implemented it and it worked.

But - the law of unintended actions kicked in.  When I click the button, it inserts the fractional character just like I need it to.  But then every one of my ej:grid's on the screen are cleared.  I tried adding return false; to the javascript code with no effect

function CuttingSpecOneQuarter() {

var instance = $("#<%=rte_CuttingSpecification.ClientID%>").data("ejRTE");

instance.pasteContent("&frac14;");

return false;

}

added the buttons to the update triggers - no luck.  I've included a short video.

I'm not a whiz at javascript so I'm thinking I'm missing something here.  Thanks!

Attachment: RTE_and_Grid_interaction_5a475154.zip

[Prince Oliver]

Hi Mike,  

 

Thank you for your update. 

 

Based on the shared video, we suspect that the page is refreshed upon clicking the insert button and hence the grid disappears. We suggest you render the button with type as “Button” as shown below in your page to resolve the issue. 

 

  <ej:RTE ID="TrimDefectCriteria" Width="850" Height="440" ShowFooter="true" runat="server"> 

        <RTEContent> 

            &lt;p&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;/p&gt; 

    &lt;p&gt;The Rich Text Editor (RTE) control is an easy to render in 

    client side. Customer easy to 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. &lt;/p&gt; 

        </RTEContent> 

    </ej:RTE> 

    <ej:Button ID="btn" Type="Button" Text="Insert" ClientSideOnClick="Insert" runat="server"></ej:Button> 

    <script> 

        function Insert() { 

            var instance = $("#<%=TrimDefectCriteria.ClientID%>").data("ejRTE"); 

            instance.pasteContent("&frac12;"); 

        } 

    </script> 

 

Kindly check the above solution and if it does not resolve your reported issue, kindly share us additional information on the issue with code snippets or sample sufficient to replicate the issue. This will help us provide a prompt solution at the earliest. 

 

Regards, 

Prince 

[Mike Potratz]

BINGO!  Never thought about adding "Type = 'Button'" to it. 

Everything is working great now - Thanks for getting this old programmer a bit smarter on your tools!  Appreciate it.

[Prince Oliver]

Hi Mike,   

Most welcome. Thank you for your valuable feedback and appreciation, we are always happy to assist you. 

Regards, 

Prince