Working with Selection

7 Jun 20174 minutes to read

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

<div class="control">
       <textarea id="texteditor" ej-rte [value]="val"></textarea>
       <button (click)="selectAll()">Select All</button>
  </div>

HTML

import {Component} from '@angular/core';

@Component({
  selector: 'sd-home',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    val: string;
    constructor() {
        this.val = "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," + " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.";
    }  
    selectAll(){
        var editor = $("#texteditor").ejRTE("instance");
        editor.selectAll();
    }
}

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

<textarea id="texteditor" ej-rte [value]="val" (create)="onCreate($event)"></textarea>

HTML

import {Component} from '@angular/core';

@Component({
  selector: 'sd-home',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    val: string;
    constructor() {
        this.val = "<ul>" + "<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>" + "<li>Aliquam tincidunt mauris eu risus.</li>" + "<li>Vestibulum auctor dapibus neque.</li>" + "</ul>";
    }
    onCreate(event) {
        var editor = $("#texteditor").ejRTE("instance");
        var 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);
    }
}

NOTE

We can provide the select range code in the create event as like the above or we can use it in the other events as per our requirement.

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

<div class="control">
       <textarea id="texteditor" ej-rte [value]="val"></textarea>
       <button (click)="getSelection()">get Selection</button>
  </div>

HTML

import {Component} from '@angular/core';

@Component({
  selector: 'sd-home',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    val: string;
    constructor() {
        this.val = "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images, it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.";
    }
   getSelection() {
    var editor = $("#texteditor").ejRTE("instance");
    var selectedText = editor.getText();
    var selectedHtml = editor.getSelectedHtml();
    }
}