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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Determine Cursor position WITHIN Existing Text in the RTE

Thread ID:

Created:

Updated:

Platform:

Replies:

143204 Mar 8,2019 04:16 PM UTC Mar 13,2019 04:58 AM UTC ASP.NET Web Forms 5
loading
Tags: RichTextEditor
Mike Potratz
Asked On March 8, 2019 04:16 PM UTC

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 [Syncfusion]
Replied On March 11, 2019 07:17 AM UTC

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: 
 
Kindly refer to the following UG link to find the current cursor position  
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Prince 


Mike Potratz
Replied On March 11, 2019 06:41 PM UTC

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 [Syncfusion]
Replied On March 12, 2019 07:31 AM UTC

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
Replied On March 12, 2019 12:53 PM UTC

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 [Syncfusion]
Replied On March 13, 2019 04:58 AM UTC

Hi Mike,   

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

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

;