tinymce.dom.Selection

This class handles text and control selection it's an crossbrowser utility class. Consult the TinyMCE Wiki API 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);

Constructors

name summary defined by
Selection() Constructs a new selection instance. tinymce.dom.Selection

Methods

name summary defined by
collapse() Collapse the selection to start or end of range. tinymce.dom.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. tinymce.dom.Selection
getContent() Returns the selected contents using the DOM serializer passed in to this class. tinymce.dom.Selection
getEnd() Returns the end element of a selection range. If the end is in a text node the parent element will be returned. tinymce.dom.Selection
getNode() Returns the currently selected element or the common ancestor element for both start and end of the selection. tinymce.dom.Selection
getRng() Returns the browsers internal range object. tinymce.dom.Selection
getSel() Returns the browsers internal selection object. tinymce.dom.Selection
getStart() Returns the start element of a selection range. If the start is in a text node the parent element will be returned. tinymce.dom.Selection
isCollapsed() Returns true/false if the selection range is collapsed or not. Collapsed means if it's a caret or a larger selection. tinymce.dom.Selection
moveToBookmark() Restores the selection to the specified bookmark. tinymce.dom.Selection
select() Selects the specified element. This will place the start and end of the selection range around the element. tinymce.dom.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. tinymce.dom.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. tinymce.dom.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. tinymce.dom.Selection
setNode() Sets the current selection to the specified DOM element. tinymce.dom.Selection
setRng() Changes the selection to the specified DOM range. tinymce.dom.Selection

Constructors

Selection

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

Constructs a new selection instance.

Parameters

Methods

collapse

collapse(toStart:Boolean)

Collapse the selection to start or end of range.

Parameters

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
var bm = tinymce.activeEditor.selection.getBookmark();

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

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

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
Return value

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
Return value

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

getRng

getRng(w3c:Boolean):Range

Returns the browsers internal range object.

Parameters
Return value

getSel

getSel():Selection

Returns the browsers internal selection object.

Return value

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
Return value

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

moveToBookmark

moveToBookmark(bookmark:Object):Boolean

Restores the selection to the specified bookmark.

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

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

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

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
Return value

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

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

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

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
Return value

setRng

setRng(rng:Range, forward:Boolean)

Changes the selection to the specified DOM range.

Parameters

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.