tinymce-dom-Selection

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, serializer:tinymce.dom.Serializer, editor:tinymce.Editor)

Constructs a new selection instance.

Parameters

• dom (tinymce.dom.DOMUtils) - DOMUtils object reference.
• win (Window) - Window to bind the selection object to.
• serializer (tinymce.dom.Serializer) - DOM serialization class to use for getContent.
• editor (tinymce.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.

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

• 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.

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

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

Return value

• Boolean - true/false if it was successful or not.

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.

Can't find what you're looking for? Let us know.

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.