Create a range, delete the selection and paste the desired content over the selection
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.
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: