Skip to content

Latest commit

 

History

History
87 lines (76 loc) · 3.87 KB

editor-create-range.md

File metadata and controls

87 lines (76 loc) · 3.87 KB
title description type page_title slug position tags ticketid res_type
Create a range, delete the selection and paste the desired content over the selection
See how to create a range in RadEditor, delete programmatically the selection and replace it with your own content in RadEditor for ASP.NET AJAX
how-to
Alternative way to paste content with JavaScript in RadEditor
editor-create-range
1587670
kb

Environment

Product Progress® Telerik® UI for ASP.NET AJAX

Description

See how to replace the current document's selection with the desired HTML. The solution section shows how to create a text range in RadEditor, delete programmatically the selection and replace it with your own content in RadEditor for ASP.NET AJAX. This scenario is useful when you'd like not to use the built-in [pasteHtml method]({%slug editor/client-side-programming/methods/pastehtml%}).

Solution

For iframe content area mode here is an example of how to create a range, delete the selection and insert new content:

        <telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="iframe">
            <Content>
                <div>
                   <p>My first paragraph!</p>
                   <p>My second paragraph!</p>
               </div>   
               <div>
                   <p>My third paragraph!</p>
                   <p>My fourth paragraph!</p>
               </div>  
            </Content>
        </telerik:RadEditor>
        <input type="button" name="Insert Span" value="Insert Span" onclick="InsertSpan();return false;" />
        <script type="text/javascript">
            function InsertSpan() {
                var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to the editor
                var range = editor.getSelection().getRange(true); // https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/client-side-programming/methods/selection/getrange
                range.deleteContents(); // https://developer.mozilla.org/en-US/docs/Web/API/Range/deleteContents
                var node = range.createContextualFragment('<span style="color:red;">test</span>'); // https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment
                range.insertNode(node); // https://developer.mozilla.org/en-US/docs/Web/API/Range/insertNode
            }
        </script>

For div content area mode, here is how to create a range, delete the selected content and replace it:

<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="div">
    <Content>
        <div>
            <p>My first paragraph!</p>
            <p>My second paragraph!</p>
        </div>   
        <div>
            <p>My third paragraph!</p>
            <p>My fourth paragraph!</p>
        </div>  
    </Content>
</telerik:RadEditor>
<input type="button" name="Insert Span" value="Insert Span" onclick="InsertSpan();return false;" />
<script type="text/javascript">
    function InsertSpan() {
        var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to the editor
        var range = window.document.getSelection().getRangeAt(0); // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
        range.deleteContents(); // https://developer.mozilla.org/en-US/docs/Web/API/Range/deleteContents
        var node = range.createContextualFragment('<span style="color:red;">test</span>'); // https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment
        range.insertNode(node); // https://developer.mozilla.org/en-US/docs/Web/API/Range/insertNode
    }
</script>

You can find more information at: