[Solved] Getting Character Position within content area

[Vivek Bhat]

Hi,

 

I am relatively new to RadEditor Customization. My requirement is as follows.

 

We will have multiple chevrons (i.e. <<>>) placed within the content area. When the user keeps his cursor within the chevron (i.e. “<<Cursor placed Here>>”) a modal dialog should be popped up which contains the text within the chevron (i.e. Cursor placed Here). This text will be displayed within a text box in the modal dialog. Now if the user modifies the text and clicks on insert in the modal dialog then the same text should be replaced within the chevron <<Changed Text>>.

 

Approach followed:

1. Used the following code to get the bookmark

   var oSel = document.selection.createRange();                                                                                                   

var bookmark = oSel.getBookmark();

2. I need to get the current cursor position now. Currently I have used

var index = bookmark.charCodeAt(2) - 13;

But I am not sure if this is a currect approach and this is not working properly if the text is formatted. I am not sure why we need to do -13 to get the index but its returning me the current index in case of non formatted text.

Because of this particular approach I have come across the following scenarios

 

Scenario 1: If the content is completely plain then no matter where the chevron is, I am able to get the index Ex. <<Rad>>  ---> in this case if I keep cursor next to R the the I am getting the index as 3

Scenario 2: If there are multiple formatting present in the document then I am unable to find the index properly.  Ex: <<Rad>>  ---> in this case if I keep cursor next to R then I am unable to get the index as 3 and I am getting index as 5. This is because the text is formatted in this case (i.e. the text R is both bold and italics).

 

I need a solution for the same which will work on different browsers. Also the text area can contain formatted text (example: text pasted from word) so I need a help in finding out the current cursor location.

[Dobromir]

Hi Vivek,

The requested functionality is not supported out-of-the-box and is not included in the advertised editor features. The content aria of the editor is an editable <iframe>. Perhaps the best approach is to implement your scenario as a separate cross-browser solution using a standard editable <iframe> or <div> element.

You can use the browsers' API to implement the solution. The following articles contains information about MS TextRange and W3C Range object (note the difference between these two objects):

http://msdn.microsoft.com/en-us/library/ms536616%28VS.85%29.aspx
http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx,
http://msdn.microsoft.com/en-us/library/ms536620%28VS.85%29.aspx
http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
http://www.quirksmode.org/dom/range_intro.html

Once you are done, send us the code and we will replace the editable <iframe>(<div>) with RadEditor and integrate the code to work with the editor.

Kind regards,

Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.