Inconsistent cursor position after using the pasteHtml method

[Dan]

I am injecting some HTML into the RadEditor's content window using the pasteHtml method in JavaScript.  The HTML I am pasting includes a <span> element, like this:

editor.pasteHtml("<span class='text-highlight'>@MyText</span>");

 

In all browsers, in Design view, after the text is pasted, the cursor appears after the span contents ("@MyText" in the example above).  In Chrome, the cursor is actually positioned inside the <span> tag (which is what I want).  In IE and Edge, however, the cursor position appears after the closing <span> tag.

Is there any way to get the cursor inside the <span> tag after the paste occurs?  I tried using variations of the range.collapse() methods (which have major limitations in IE anyway), but it had the adverse effect of taking the focus away from the RadEditor control.

 

[Rumen]

Hi Dan,

You can position the cursor inside the span via the following code:

<telerik:RadEditor runat="server" ID="RadEditor1"></telerik:RadEditor>
<input type="button" value="Paste Content" onclick="InsertSpan(); return false;" />
<script type="text/javascript">
    function InsertSpan() {
        var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to the editor
        editor.pasteHtml('<span style="width:100px;border: 1px solid red;background-color: blue;color: white;">sample content<span id="_reSelectionMarker"></span>');

        var marker = editor.findContent("#_reSelectionMarker").get(0); //get the marker

        var range = editor.getDomRange();
        range.selectNodeContents(marker);//Select the entire contents of the element with the range
        range.collapse(false);//false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
        marker.parentNode.removeChild(marker); //remove the marker
    }
</script>

Regards,
Rumen
Progress Telerik

[Dan]

Thanks Rumen.  I tried similar code, but it did not work for me since the RadEditor would consistently lose focus whenever I called a range.collapse() function in the JavaScript.  This may be related to something else in my environment.  I was able to work around it by using the function below (if the browser detected was IE or Edge).

Thank you again!

function selectText(node) {
    node = document.getElementById(node);
    if (document.body.createTextRange) {
        // this is for IE
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.moveStart('character', 1);
        range.select();
    } else if (window.getSelection) {
        // this is for Edge
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        range.setStart(node, 1);
        range.setEnd(node, 1);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn('WARNING: unsupported browser detected in selectText');
    }
}

[Rumen]

Hi Dan,

Thank you for sharing the solution! I am glad that everything is fine now :)

Regards,
Rumen
Progress Telerik