RadEditor - How to Get cursor position

[nickybeit]

Hi Support,

I've an application using RadEditor control.

I've a scenario where I've to "set the cursor position" or "set text selection range" in javascript.

How can achieve this functionality? Are there any methods provided for this functionality?

Awaiting sooner reply


Regards
Nickybeit

[nickybeit]

i'm still waiting for the response.

[Rumen]

Hello Nickybeit,

RadEditorSelection's client-side API offers getRange() and selectRange() methods to get / restore cursor position.

RadEditorSelection utilizes W3C Range and Microsoft TextRange objects to provide cross-browser support, however, for more advanced manipulations you will need to use the standard objects. More detailed information regarding W3C Range and Microsoft TextRange is available in the following articles:

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

Greetings,
Rumen
the Telerik team

[Abhinav]

Hello,

How we can get the current cursor index from the radeditor? I need to add some text from the server side in radeditor on the current cursor position.

I have also tried "editor.getSelection().getRange(true);", but in jquery alert i am not see any index or position. My requirement is to find the current cursor index in client side or server side.

Please suggest.

[Ianko]

Hello Abhinav,

The client-side getRange() methods returns an instance of an Range object, which is created by the browser, and in order to somehow determine the selection ranges, you should use the startOffset and endOffset properties. Although, this is a general knowledge regarding the browser's selection, and you can read more about it in this help articles:

• Document Object Model Range
• TextRange object

As for the requirements posted, you cannot manipulate the range/selection via server-side technique. This is a browser functionality, and can be handled only on the client. For example:

<telerik:RadButton runat="server" ID="RadButton1" Text="Store Range" OnClientClicked="storeRange" AutoPostBack="false"/>
<telerik:RadButton runat="server" ID="Button1" Text="Insert in stored Range" OnClientClicked="insertInRange" AutoPostBack="false" />

<script type="text/javascript">
    var _storedRange = {};

    function storeRange(sender, args) {
        var editor = $find("<%= RadEditor1.ClientID %>");
        var selection = editor.getSelection();

        _storedRange = selection.getRange();
    }

    function insertInRange(sender, args) {
        var editor = $find("<%= RadEditor1.ClientID %>");
        var selection = editor.getSelection();

        selection.selectRange(_storedRange);
        editor.pasteHtml("some text");
    }
</script>

Regards,

Ianko
Telerik

[Abhinav]

I have tried startOffset and endOffset properties but it is not giving the correct index. If i put my cursor on the starting of the 4th paragraph in the editor these properties gives 0.

Also, i need a way though that i can store my cursor index or position in the hidden field or something like that and after postback add some text into the editor with current cursor position(which was in the hidden field).

Please suggest.

 

[Ianko]

Hi Abhinav,

Such complex Range/Selection manipulations can be done only via the browser's Range/Selection object, and RadEditor does not expose any specific API to facilitate its usage in such a scenario. This should be handled by using only the browser's client-side API.

Regards,
Ianko
Telerik