Rad editor cursor position

[Raghavendra]

Hi team,

Currently I'm working on a module where i need to capture the key press event in radeditor. That will be caught when I've clicked on spacebar. The internal script will capture the text in the editor and sends the text to the server side method i.e .cs method. On recieving the text I'll do some manipulations and return back a new text to the editor.

The above 2-way operation is working fine both getting text from rad editor and setting text to radeditor. But problem is that whenever I'm returning the text to editor the cursor position is always set to the start of the word instead of at the end of word.

For ex: If I return text as HELLO then the cursor should be placed after word (HELLO cursor) but the cursor is coming before the word(cursor HELLO).

Kindly give me a solution to my problem

I'm also pasting the script which I've used to get and set

getting value of editor:

 function OnClientLoad(editor, args) {

            editor.attachEventHandler("onkeydown", function (e) {
                if (e.keyCode == 32) {
                    setTimeout(function () {
                        var v = $find("<%=Editor1.ClientID %>").get_text();
                        //alert(v);
                        document.getElementById('<%= HiddenField4.ClientID %>').value = v;
                        var s = document.getElementById('<%= HiddenField4.ClientID %>').value;
                        //alert(s);
                        CallServer(s, "");



                    }, 0);
                }

            });

Setting value to editor:

 function ReceiveServerData(rValue) {
            //var editor = ("<%=Editor1.ClientID%>");
            $find("<%=Editor1.ClientID%>").set_html(" " + rValue + " ");
}

[Raghavendra]

Any updates in the below query please!!!!!!!!!!!!!!!!!?????????

[Nikolay]

Hi,

See the following example which shows how the cursor can be placed. In the example the cursor is placed in a certain position on click event.

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
    <Content>
        <div>test div</div>
        <p>test paragraph</p>
        <div>test div</div>
    </Content>
</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        $telerik.addHandler(editor.get_contentArea(), 'click', function() {
            var paragraph = editor.get_contentArea().getElementsByTagName('p')[0];
            var position = 3;
            setCursor(editor, paragraph, position);
        });
    }
    function setCursor(editor, element, position) {
        var selection = editor.getSelection(),
        range = selection.getRange(true);
        if (range.setStart) {//W3 range
            range.setStart(element.firstChild, position);
        }
        else { //IE7/8 textRange
            range.moveToElementText(element);
            range.moveStart('character', position);
        }
        range.collapse(true);
        selection.selectRange(range);
    }
</script>

About the ranges, you can see these articles:

• W3 range - supported in major browsers
• Microsoft TextRange object - for IE7 and IE8
• How to get the range object from the RadEditor

Regards,
Nikolay
Telerik

[Raghavendra]

Hi team,

using this statement
var v = $find("<%=Editor1.ClientID %>").get_text();
I can only get text of editor i.e how are you.....

But i need to get html content value of editor
<b>How</b> <br /> are....

Please help me

[Ianko]

Hi Raghavendra,

To retrieve the HTML, generated in the RadEditor's content you could use the get_html() method rather than the get_text() one.

Regards,
Ianko
Telerik