tinymce.dom.Selection

This class handles text and control selection it’s an crossbrowser utility class. Consult the TinyMCE API Documentation for more details and examples on how to use this class.

Examples

// Getting the currently selected node for the active editor
alert(tinymce.activeEditor.selection.getNode().nodeName);

Summary

Constructors

Name Summary Defined by

Selection()

Constructs a new selection instance.

Selection

Methods

Name Summary Defined by

collapse()

Collapse the selection to start or end of range.

Selection

expand()

Expands the selection range to contain the entire word when the selection is collapsed within the word.

Selection

getBookmark()

Returns a bookmark location for the current selection. This bookmark object can then be used to restore the selection after some content modification to the document.

Selection

getContent()

Returns the selected contents using the DOM serializer passed in to this class.

Selection

getEnd()

Returns the end element of a selection range. If the end is in a text node the parent element will be returned.

Selection

getNode()

Returns the currently selected element or the common ancestor element for both start and end of the selection.

Selection

getRng()

Returns the browsers internal range object.

Selection

getSel()

Returns the browsers internal selection object.

Selection

getStart()

Returns the start element of a selection range. If the start is in a text node the parent element will be returned.

Selection

isCollapsed()

Returns true/false if the selection range is collapsed or not. Collapsed means if it’s a caret or a larger selection.

Selection

isEditable()

Checks if the current selection’s start and end containers are editable within their parent’s contexts.

Selection

moveToBookmark()

Restores the selection to the specified bookmark.

Selection

select()

Selects the specified element. This will place the start and end of the selection range around the element.

Selection

selectorChanged()

Executes callback when the current selection starts/stops matching the specified selector. The current state will be passed to the callback as it’s first argument.

Selection

setContent()

Sets the current selection to the specified content. If any contents is selected it will be replaced with the contents passed in to this function. If there is no selection the contents will be inserted where the caret is placed in the editor/page.

Selection

setCursorLocation()

Move the selection cursor range to the specified node and offset. If there is no node specified it will move it to the first suitable location within the body.

Selection

setNode()

Sets the current selection to the specified DOM element.

Selection

setRng()

Changes the selection to the specified DOM range.

Selection

Constructors

Selection

public constructor function Selection(dom: tinymce.dom.DOMUtils, win: Window, serializer: tinymce.dom.Serializer, editor: tinymce.Editor)

Constructs a new selection instance.

Parameters

  • dom (DOMUtils) - DOMUtils object reference.

  • win (Window) - Window to bind the selection object to.

  • serializer (Serializer) - DOM serialization class to use for getContent.

  • editor (Editor) - Editor instance of the selection.

Methods

collapse()

collapse(toStart: Boolean)

Collapse the selection to start or end of range.

Parameters

  • toStart (Boolean) - Optional boolean state if to collapse to end or not. Defaults to false.

expand()

expand(options: Object)

Expands the selection range to contain the entire word when the selection is collapsed within the word.

Parameters

  • options (Object) - Optional options provided to the expansion. Defaults to { type: 'word' }

getBookmark()

getBookmark(type: Number, normalized: Boolean): Object

Returns a bookmark location for the current selection. This bookmark object can then be used to restore the selection after some content modification to the document.

Examples

// Stores a bookmark of the current selection
const bm = tinymce.activeEditor.selection.getBookmark();

tinymce.activeEditor.setContent(tinymce.activeEditor.getContent() + 'Some new content');

// Restore the selection bookmark
tinymce.activeEditor.selection.moveToBookmark(bm);

Parameters

  • type (Number) - Optional state if the bookmark should be simple or not. Default is complex.

  • normalized (Boolean) - Optional state that enables you to get a position that it would be after normalization.

Return value

  • Object - Bookmark object, use moveToBookmark with this object to restore the selection.

getContent()

getContent(args: Object): String

Returns the selected contents using the DOM serializer passed in to this class.

Examples

// Alerts the currently selected contents
alert(tinymce.activeEditor.selection.getContent());

// Alerts the currently selected contents as plain text
alert(tinymce.activeEditor.selection.getContent({ format: 'text' }));

Parameters

  • args (Object) - Optional settings class with for example output format text or html.

Return value

  • String - Selected contents in for example HTML format.

getEnd()

getEnd(real: Boolean): Element

Returns the end element of a selection range. If the end is in a text node the parent element will be returned.

Parameters

  • real (Boolean) - Optional state to get the real parent when the selection is collapsed not the closest element.

Return value

  • Element - End element of selection range.

getNode()

getNode(): Element

Returns the currently selected element or the common ancestor element for both start and end of the selection.

Examples

// Alerts the currently selected elements node name
alert(tinymce.activeEditor.selection.getNode().nodeName);

Return value

  • Element - Currently selected element or common ancestor element.

getRng()

getRng(): Range

Returns the browsers internal range object.

Return value

  • Range - Internal browser range object.

getSel()

getSel(): Selection

Returns the browsers internal selection object.

Return value

  • Selection - Internal browser selection object.

getStart()

getStart(real: Boolean): Element

Returns the start element of a selection range. If the start is in a text node the parent element will be returned.

Parameters

  • real (Boolean) - Optional state to get the real parent when the selection is collapsed not the closest element.

Return value

  • Element - Start element of selection range.

isCollapsed()

isCollapsed(): Boolean

Returns true/false if the selection range is collapsed or not. Collapsed means if it’s a caret or a larger selection.

Return value

  • Boolean - true/false state if the selection range is collapsed or not. Collapsed means if it’s a caret or a larger selection.

isEditable()

isEditable(): Boolean

Checks if the current selection’s start and end containers are editable within their parent’s contexts.

Return value

  • Boolean - Will be true if the selection is editable and false if it’s not editable.

moveToBookmark()

moveToBookmark(bookmark: Object)

Restores the selection to the specified bookmark.

Examples

// Stores a bookmark of the current selection
const bm = tinymce.activeEditor.selection.getBookmark();

tinymce.activeEditor.setContent(tinymce.activeEditor.getContent() + 'Some new content');

// Restore the selection bookmark
tinymce.activeEditor.selection.moveToBookmark(bm);

Parameters

  • bookmark (Object) - Bookmark to restore selection from.

select()

select(node: Element, content: Boolean): Element

Selects the specified element. This will place the start and end of the selection range around the element.

Examples

// Select the first paragraph in the active editor
tinymce.activeEditor.selection.select(tinymce.activeEditor.dom.select('p')[0]);

Parameters

  • node (Element) - HTML DOM element to select.

  • content (Boolean) - Optional bool state if the contents should be selected or not on non IE browser.

Return value

  • Element - Selected element the same element as the one that got passed in.

selectorChanged()

selectorChanged(selector: String, callback: Function)

Executes callback when the current selection starts/stops matching the specified selector. The current state will be passed to the callback as it’s first argument.

Parameters

  • selector (String) - CSS selector to check for.

  • callback (Function) - Callback with state and args when the selector is matches or not.

setContent()

setContent(content: String, args: Object)

Sets the current selection to the specified content. If any contents is selected it will be replaced with the contents passed in to this function. If there is no selection the contents will be inserted where the caret is placed in the editor/page.

Examples

// Inserts some HTML contents at the current selection
tinymce.activeEditor.selection.setContent('<strong>Some contents</strong>');

Parameters

  • content (String) - HTML contents to set could also be other formats depending on settings.

  • args (Object) - Optional settings object with for example data format.

setCursorLocation()

setCursorLocation(node: Node, offset: Number)

Move the selection cursor range to the specified node and offset. If there is no node specified it will move it to the first suitable location within the body.

Parameters

  • node (Node) - Optional node to put the cursor in.

  • offset (Number) - Optional offset from the start of the node to put the cursor at.

setNode()

setNode(elm: Element): Element

Sets the current selection to the specified DOM element.

Examples

// Inserts a DOM node at current selection/caret location
tinymce.activeEditor.selection.setNode(tinymce.activeEditor.dom.create('img', { src: 'some.gif', title: 'some title' }));

Parameters

  • elm (Element) - Element to set as the contents of the selection.

Return value

  • Element - Returns the element that got passed in.

setRng()

setRng(rng: Range, forward: Boolean)

Changes the selection to the specified DOM range.

Parameters

  • rng (Range) - Range to select.

  • forward (Boolean) - Optional boolean if the selection is forwards or backwards.