This is a migrated thread and some comments may be shown as answers.

Inconsistent cursor position after using the pasteHtml method

3 Answers 9 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 2
Dan asked on 07 Dec 2018, 09:30 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 12 Dec 2018, 01:33 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dan
Top achievements
Rank 2
answered on 13 Dec 2018, 06:43 PM

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');
    }
}
0
Rumen
Telerik team
answered on 14 Dec 2018, 01:31 PM
Hi Dan,

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

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
Dan
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Dan
Top achievements
Rank 2
Share this question
or