Working with Selection

The editor control provides option to select all the content and in addition to selection of a particular range of content.

Select All

The selectAll method enables you to select the entire content including images in the editor by programmatically.

NOTE

the selection highlight is invisible if the editor does not have focus. So, if you want to call the selectAll method, focus the editor before.

  • html
  • <ej:RTE ID="RTE2" runat="server">
        <RTEContent>
                The Rich Text Editor  (RTE) control is an easy to render in client side. Customer easy to edit the contents and get the HTML content for the displayed content. A rich text editor control provides users with a toolbar that helps them to apply rich text formats to the text entered  in the text area.
        </RTEContent>
    </ej:RTE>
    <br />
    <ej:Button ID="Button" runat="server" Text="Select All" ClientSideOnClick="selectAll"></ej:Button>
    
    <script type="text/javascript">
        function selectAll() {
            var editor = $("#<%=RTE2.ClientID%>").ejRTE("instance");
            editor.selectAll();
        }
    
    </script>

    Select a Range

    You can programmatically select a range of content in the editor using the selectRange method. To select a range, create a range object with desired offset position and pass it as arguments to selectRange method. The range object is created from createRange method.

  • html
  • <ej:RTE ID="RTE2" runat="server" >
        <RTEContent>
            <ul>
                <li>The Rich Text Editor  (RTE) control is an easy to render in client side. </li>
                <li>Customer easy to edit the contents and get the HTML content for the displayed content. </li>
                <li> A rich text editor control provides users with a toolbar that helps them to apply rich text formats to the text entered  in the text area.</li>
            </ul>       
        </RTEContent>
    </ej:RTE>
    <br />
    <ej:Button ID="Button" runat="server" Text="Range" ClientSideOnClick="selectAll"></ej:Button>
    
    <script type="text/javascript">
        function selectAll() {
            var editor = $("#<%=RTE2.ClientID%>").ejRTE("instance");
            range = editor.createRange();
            var liTag = $(editor.getDocument().body).find("li");
            if (!editor._isIE8()) {
                range.setStart(liTag[1], 0);
                range.setEnd(liTag[2], 1);
            }
            else {
                range = editor.getDocument().body.createTextRange()
                range.moveToElementText(liTag[2]);
            }
            editor.selectRange(range);
        }
    
    </script>

    Get Selection

    The following public methods helps you to retrieve the selected content from the editor:

    • getText method is used to get the currently selected content as raw text.
    • getSelectedHtml method is used to get the HTML source of currently selected content.
  • html
  • <ej:RTE ID="RTE2" runat="server">
        <RTEContent>
                The Rich Text Editor  (RTE) control is an easy to render in client side. Customer easy to edit the contents and get the HTML content for the displayed content. A rich text editor control provides users with a toolbar that helps them to apply rich text formats to the text entered  in the text area.      
        </RTEContent>
    </ej:RTE>
    <br />
    <ej:Button ID="Button" runat="server" Text="Get Selection" ClientSideOnClick="selectAll"></ej:Button>
    
    <script type="text/javascript">
        function selectAll() {
            var editor = $("#<%=RTE2.ClientID%>").ejRTE("instance");
            var selectedText = editor.getText();
            var selectedHtml = editor.getSelectedHtml();
        }
    
    </script>