[Solved] How to show div on the cursor position inside the editor

[Ritu Badhwar]

How can I open the div on the cursor positon(text blinker) inside the editor using javascipt. I found the methods
the editor.getSelection().getRange() and editor.getSelection().selectRange(rangeObject) methods.
But this will work when we select the text but my requirement is to open the div without selecting the text

Thanks
Ritu

[Dobromir]

Hi Ritu,

In order to insert HTML inside the RadEditor's content area you can use pasteHtml() client-side method, e.g.:

<telerik:RadEditor ID="RadEditor1" runat="server">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="AddDiv" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        Some sample text. Some sample text. Some sample text.
    </Content>
</telerik:RadEditor>
<asp:Button ID="Button1" runat="server" OnClientClick="addDiv(); return false;" Text="Add DIV" />
<script type="text/javascript">
    //function that is executed on the Button1 click
    function addDiv()
    {
        var editor = $find("<%=RadEditor1.ClientID %>");
        editor.pasteHtml("<div style=\"width:200px;height:50px;border:1px solid red;\">this is the div</div>");
    }
    //register the custom command AddDiv
    Telerik.Web.UI.Editor.CommandList["AddDiv"] = function(commandName, editor, args) {
        editor.pasteHtml("<div style=\"width:200px;height:50px;border:1px solid red;\">this is the div</div>");
    };
</script>

This code demonstrates how to insert DIV using a custom tool on the toolbar and standard asp:Button.

If this is not the case, could you please describe the scenario in details?

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.

[Ritu Badhwar]

Thanks for Replying

But this is not my requirement.
I need the functionality inside the editor same as autocomplete text.
Therefore I need to get the position of the cursor inside the editor so that I can open a div and show the data inside it.
Could you please tell me how to get the positon of the cursor inside the editor.

Thanks
Ritu

[Dobromir]

Hi Ritu,

Please note that this functionality is not provided out-of-the box and it is not part of the advertised features. Nevertheless, it is possible to achieve such functionality using W3C Range and Microsoft TextRange objects. You can find information about these objects 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

For your convenience, here is a sample that alerts the caret coordinates onkeyup:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
    var oDoc = null;

    OnClientLoad = function(editor, args)
    {
        oDoc = editor.get_document();

        editor.attachEventHandler("onkeyup", function()
        {
            alert(findPos(editor.getSelection().getRange()));
        });
    }


    function findPos(obj)
    {
        var curleft = curtop = 0;

        if (obj)
        {
            if (!document.all)
            {
                //create an element to wrap the selection because W3C Range does not have offsetLeft and offsetTop properties
                var tmpElem = document.createElement("span");
                oDoc.body.appendChild(tmpElem);
                obj.surroundContents(tmpElem);
                obj = tmpElem;
            }

            do
            {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        }
        return [curleft,curtop];
    }
</script>

I hope this helps.


Kind regards,
Dobromir
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.