tinymce.dom.DOMUtils

Utility class for various DOM manipulation and retrieval functions.

Examples

// Add a class to an element by id in the page
tinymce.DOM.addClass('someid', 'someclass');

// Add a class to an element by id inside the editor
tinymce.activeEditor.dom.addClass('someid', 'someclass');

Properties

name type summary defined by
DOM tinymce.dom.DOMUtils Instance of DOMUtils for the current document. tinymce.dom.DOMUtils

Constructors

name summary defined by
DOMUtils() Constructs a new DOMUtils instance. Consult the Wiki for more details on settings etc for this class. tinymce.dom.DOMUtils

Methods

name summary defined by
add() Adds the specified element to another element or elements. tinymce.dom.DOMUtils
addClass() Adds a class to the specified element or elements. tinymce.dom.DOMUtils
addStyle() Adds a style element at the top of the document with the specified cssText content. tinymce.dom.DOMUtils
bind() Adds an event handler to the specified object. tinymce.dom.DOMUtils
create() Creates a new element. tinymce.dom.DOMUtils
createFragment() Creates a document fragment out of the specified HTML string. tinymce.dom.DOMUtils
createHTML() Creates HTML string for element. The element will be closed unless an empty inner HTML string is passed in. tinymce.dom.DOMUtils
createRng() Creates a new DOM Range object. This will use the native DOM Range API if it's available. If it's not, it will fall back to the custom TinyMCE implementation. tinymce.dom.DOMUtils
decode() Entity decodes a string. This method decodes any HTML entities, such as å. tinymce.dom.DOMUtils
destroy() Destroys all internal references to the DOM to solve IE leak issues. tinymce.dom.DOMUtils
encode() Entity encodes a string. This method encodes the most common entities, such as <>"&. tinymce.dom.DOMUtils
findCommonAncestor() Find the common ancestor of two elements. This is a shorter method than using the DOM Range logic. tinymce.dom.DOMUtils
fire() Fires the specified event name with object on target. tinymce.dom.DOMUtils
get() Returns the specified element by ID or the input element if it isn't a string. tinymce.dom.DOMUtils
getAttrib() Returns the specified attribute by name. tinymce.dom.DOMUtils
getAttribs() Returns a NodeList with attributes for the element. tinymce.dom.DOMUtils
getNext() Returns the next node that matches selector or function tinymce.dom.DOMUtils
getOuterHTML() Returns the outer HTML of an element. tinymce.dom.DOMUtils
getParent() Returns a node by the specified selector function. This function will loop through all parent nodes and call the specified function for each node. If the function then returns true indicating that it has found what it was looking for, the loop execution will then end and the node it found will be returned. tinymce.dom.DOMUtils
getParents() Returns a node list of all parents matching the specified selector function or pattern. If the function then returns true indicating that it has found what it was looking for and that node will be collected. tinymce.dom.DOMUtils
getPos() Returns the absolute x, y position of a node. The position will be returned in an object with x, y fields. tinymce.dom.DOMUtils
getPrev() Returns the previous node that matches selector or function tinymce.dom.DOMUtils
getRect() Returns the rectangle for a specific element. tinymce.dom.DOMUtils
getRoot() Returns the root node of the document. This is normally the body but might be a DIV. Parents like getParent will not go above the point of this root node. tinymce.dom.DOMUtils
getSize() Returns the size dimensions of the specified element. tinymce.dom.DOMUtils
getStyle() Returns the current style or runtime/computed value of an element. tinymce.dom.DOMUtils
getViewPort() Returns the viewport of the window. tinymce.dom.DOMUtils
hasClass() Returns true if the specified element has the specified class. tinymce.dom.DOMUtils
hide() Hides the specified element(s) by ID by setting the "display" style. tinymce.dom.DOMUtils
insertAfter() Inserts an element after the reference element. tinymce.dom.DOMUtils
is() Returns true/false if the specified element matches the specified css pattern. tinymce.dom.DOMUtils
isBlock() Returns true/false if the specified element is a block element or not. tinymce.dom.DOMUtils
isEmpty() Returns true/false if the specified node is to be considered empty or not. tinymce.dom.DOMUtils
isHidden() Returns true/false if the element is hidden or not by checking the "display" style. tinymce.dom.DOMUtils
loadCSS() Imports/loads the specified CSS file into the document bound to the class. tinymce.dom.DOMUtils
nodeIndex() Returns the index of the specified node within its parent. tinymce.dom.DOMUtils
parseStyle() Parses the specified style value into an object collection. This parser will also merge and remove any redundant items that browsers might have added. It will also convert non-hex colors to hex values. Urls inside the styles will also be converted to absolute/relative based on settings. tinymce.dom.DOMUtils
remove() Removes/deletes the specified element(s) from the DOM. tinymce.dom.DOMUtils
removeAllAttribs() Removes all attributes from an element or elements. tinymce.dom.DOMUtils
removeClass() Removes a class from the specified element or elements. tinymce.dom.DOMUtils
rename() Renames the specified element and keeps its attributes and children. tinymce.dom.DOMUtils
replace() Replaces the specified element or elements with the new element specified. The new element will be cloned if multiple input elements are passed in. tinymce.dom.DOMUtils
run() Executes the specified function on the element by id or dom element node or array of elements/id. tinymce.dom.DOMUtils
select() Selects specific elements by a CSS level 3 pattern. For example "div#a1 p.test". This function is optimized for the most common patterns needed in TinyMCE but it also performs well enough on more complex patterns. tinymce.dom.DOMUtils
serializeStyle() Serializes the specified style object into a string. tinymce.dom.DOMUtils
setAttrib() Sets the specified attribute of an element or elements. tinymce.dom.DOMUtils
setAttribs() Sets two or more specified attributes of an element or elements. tinymce.dom.DOMUtils
setHTML() Sets the specified HTML content inside the element or elements. The HTML will first be processed. This means URLs will get converted, hex color values fixed etc. Check processHTML for details. tinymce.dom.DOMUtils
setOuterHTML() Sets the specified outer HTML on an element or elements. tinymce.dom.DOMUtils
setStyle() Sets the CSS style value on a HTML element. The name can be a camelcase string or the CSS style name like background-color. tinymce.dom.DOMUtils
setStyles() Sets multiple styles on the specified element(s). tinymce.dom.DOMUtils
show() Shows the specified element(s) by ID by setting the "display" style. tinymce.dom.DOMUtils
split() Splits an element into two new elements and places the specified split element or elements between the new ones. For example splitting the paragraph at the bold element in this example

abcabc123

would produce

abc

abc

123

.
tinymce.dom.DOMUtils
toHex() Parses the specified RGB color value and returns a hex version of that color. tinymce.dom.DOMUtils
toggleClass() Toggles the specified class on/off. tinymce.dom.DOMUtils
unbind() Removes the specified event handler by name and function from an element or collection of elements. tinymce.dom.DOMUtils
uniqueId() Returns a unique id. This can be useful when generating elements on the fly. This method will not check if the element already exists. tinymce.dom.DOMUtils

Constructors

DOMUtils

public constructor function DOMUtils(doc:Document, settings:settings)

Constructs a new DOMUtils instance. Consult the Wiki for more details on settings etc for this class.

Parameters

Methods

add

add(parentElm:String, name:String, attrs:Object, html:String, create:Boolean):Element, Array

Adds the specified element to another element or elements.

Examples
// Adds a new paragraph to the end of the active editor
tinymce.activeEditor.dom.add(tinymce.activeEditor.getBody(), 'p', {title: 'my title'}, 'Some content');
Parameters
Return value

addClass

addClass(elm:String, cls:String):String, Array

Adds a class to the specified element or elements.

Examples
// Adds a class to all paragraphs in the active editor
tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'myclass');

// Adds a class to a specific element in the current page
tinymce.DOM.addClass('mydiv', 'myclass');
Parameters
Return value

addStyle

addStyle(cssText:String)

Adds a style element at the top of the document with the specified cssText content.

Parameters

bind

bind(target:Element, name:String, func:function, scope:Object):function

Adds an event handler to the specified object.

Parameters
Return value

create

create(name:String, attrs:Object, html:String):Element

Creates a new element.

Examples
// Adds an element where the caret/selection is in the active editor
var el = tinymce.activeEditor.dom.create('div', {id: 'test', 'class': 'myclass'}, 'some content');
tinymce.activeEditor.selection.setNode(el);
Parameters
Return value

createFragment

createFragment(html:String):DocumentFragment

Creates a document fragment out of the specified HTML string.

Parameters
Return value

createHTML

createHTML(name:String, attrs:Object, html:String):String

Creates HTML string for element. The element will be closed unless an empty inner HTML string is passed in.

Examples
// Creates a html chunk and inserts it at the current selection/caret location
tinymce.activeEditor.selection.setContent(tinymce.activeEditor.dom.createHTML('a', {href: 'test.html'}, 'some line'));
Parameters
Return value

createRng

createRng():DOMRange

Creates a new DOM Range object. This will use the native DOM Range API if it's available. If it's not, it will fall back to the custom TinyMCE implementation.

Examples
var rng = tinymce.DOM.createRng();
alert(rng.startContainer + "," + rng.startOffset);
Return value

decode

decode(s:String):String

Entity decodes a string. This method decodes any HTML entities, such as å.

Parameters
Return value

destroy

destroy()

Destroys all internal references to the DOM to solve IE leak issues.

encode

encode(text:String):String

Entity encodes a string. This method encodes the most common entities, such as <>"&.

Parameters
Return value

findCommonAncestor

findCommonAncestor(a:Element, b:Element):Element

Find the common ancestor of two elements. This is a shorter method than using the DOM Range logic.

Parameters
Return value

fire

fire(target:Node, name:String, evt:Object):Event

Fires the specified event name with object on target.

Parameters
Return value

get

get(n:String):Element

Returns the specified element by ID or the input element if it isn't a string.

Parameters
Return value

getAttrib

getAttrib(elm:String, name:String, defaultVal:String):String

Returns the specified attribute by name.

Parameters
Return value

getAttribs

getAttribs(elm:HTMLElement):NodeList

Returns a NodeList with attributes for the element.

Parameters
Return value

getNext

getNext(node:Node, selector:String):Node

Returns the next node that matches selector or function

Parameters
Return value

getOuterHTML

getOuterHTML(elm:String):String

Returns the outer HTML of an element.

Examples
tinymce.DOM.getOuterHTML(editorElement);
tinymce.activeEditor.getOuterHTML(tinymce.activeEditor.getBody());
Parameters
Return value

getParent

getParent(node:Node, selector:function, root:Node):Node

Returns a node by the specified selector function. This function will loop through all parent nodes and call the specified function for each node. If the function then returns true indicating that it has found what it was looking for, the loop execution will then end and the node it found will be returned.

Parameters
Return value

getParents

getParents(node:Node, selector:function, root:Node):Array

Returns a node list of all parents matching the specified selector function or pattern. If the function then returns true indicating that it has found what it was looking for and that node will be collected.

Parameters
Return value

getPos

getPos(elm:Element, rootElm:Element):object

Returns the absolute x, y position of a node. The position will be returned in an object with x, y fields.

Parameters
Return value

getPrev

getPrev(node:Node, selector:String):Node

Returns the previous node that matches selector or function

Parameters
Return value

getRect

getRect(elm:Element):object

Returns the rectangle for a specific element.

Parameters
Return value

getRoot

getRoot():Element

Returns the root node of the document. This is normally the body but might be a DIV. Parents like getParent will not go above the point of this root node.

Return value

getSize

getSize(elm:Element):object

Returns the size dimensions of the specified element.

Parameters
Return value

getStyle

getStyle(elm:String, name:String, computed:Boolean):String

Returns the current style or runtime/computed value of an element.

Parameters
Return value

getViewPort

getViewPort(win:Window):Object

Returns the viewport of the window.

Parameters
Return value

hasClass

hasClass(elm:String, cls:String):Boolean

Returns true if the specified element has the specified class.

Parameters
Return value

hide

hide(elm:String)

Hides the specified element(s) by ID by setting the "display" style.

Examples
// Hides an element by id in the document
tinymce.DOM.hide('myid');
Parameters

insertAfter

insertAfter(node:Element, referenceNode:Element):Element, Array

Inserts an element after the reference element.

Parameters
Return value

is

is(elm:Node, selector:String)

Returns true/false if the specified element matches the specified css pattern.

Parameters

isBlock

isBlock(node:Node):Boolean

Returns true/false if the specified element is a block element or not.

Parameters
Return value

isEmpty

isEmpty(elements:Object):Boolean

Returns true/false if the specified node is to be considered empty or not.

Examples
tinymce.DOM.isEmpty(node, {img: true});
Parameters
Return value

isHidden

isHidden(elm:String):Boolean

Returns true/false if the element is hidden or not by checking the "display" style.

Parameters
Return value

loadCSS

loadCSS(url:String)

Imports/loads the specified CSS file into the document bound to the class.

Examples
// Loads a CSS file dynamically into the current document
tinymce.DOM.loadCSS('somepath/some.css');

// Loads a CSS file into the currently active editor instance
tinymce.activeEditor.dom.loadCSS('somepath/some.css');

// Loads a CSS file into an editor instance by id
tinymce.get('someid').dom.loadCSS('somepath/some.css');

// Loads multiple CSS files into the current document
tinymce.DOM.loadCSS('somepath/some.css,somepath/someother.css');
Parameters

nodeIndex

nodeIndex(node:Node, normalized:boolean):Number

Returns the index of the specified node within its parent.

Parameters
Return value

parseStyle

parseStyle(cssText:String):Object

Parses the specified style value into an object collection. This parser will also merge and remove any redundant items that browsers might have added. It will also convert non-hex colors to hex values. Urls inside the styles will also be converted to absolute/relative based on settings.

Parameters
Return value

remove

remove(node:String, keepChildren:Boolean):Element, Array

Removes/deletes the specified element(s) from the DOM.

Examples
// Removes all paragraphs in the active editor
tinymce.activeEditor.dom.remove(tinymce.activeEditor.dom.select('p'));

// Removes an element by id in the document
tinymce.DOM.remove('mydiv');
Parameters
Return value

removeAllAttribs

removeAllAttribs(e:Element)

Removes all attributes from an element or elements.

Parameters

removeClass

removeClass(elm:String, cls:String):String, Array

Removes a class from the specified element or elements.

Examples
// Removes a class from all paragraphs in the active editor
tinymce.activeEditor.dom.removeClass(tinymce.activeEditor.dom.select('p'), 'myclass');

// Removes a class from a specific element in the current page
tinymce.DOM.removeClass('mydiv', 'myclass');
Parameters
Return value

rename

rename(elm:Element, name:String):Element

Renames the specified element and keeps its attributes and children.

Parameters
Return value

replace

replace(newElm:Element, oldElm:Element, keepChildren:Boolean)

Replaces the specified element or elements with the new element specified. The new element will be cloned if multiple input elements are passed in.

Parameters

run

run(elm:String, func:function, scope:Object):Object, Array

Executes the specified function on the element by id or dom element node or array of elements/id.

Parameters
Return value

select

select(selector:String, scope:Object):Array

Selects specific elements by a CSS level 3 pattern. For example "div#a1 p.test". This function is optimized for the most common patterns needed in TinyMCE but it also performs well enough on more complex patterns.

Examples
// Adds a class to all paragraphs in the currently active editor
tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'someclass');

// Adds a class to all spans that have the test class in the currently active editor
tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('span.test'), 'someclass')
Parameters
Return value

serializeStyle

serializeStyle(styles:Object, name:String):String

Serializes the specified style object into a string.

Parameters
Return value

setAttrib

setAttrib(elm:Element, name:String, value:String)

Sets the specified attribute of an element or elements.

Examples
// Sets class attribute on all paragraphs in the active editor
tinymce.activeEditor.dom.setAttrib(tinymce.activeEditor.dom.select('p'), 'class', 'myclass');

// Sets class attribute on a specific element in the current page
tinymce.dom.setAttrib('mydiv', 'class', 'myclass');
Parameters

setAttribs

setAttribs(elm:Element, attrs:Object)

Sets two or more specified attributes of an element or elements.

Examples
// Sets class and title attributes on all paragraphs in the active editor
tinymce.activeEditor.dom.setAttribs(tinymce.activeEditor.dom.select('p'), {'class': 'myclass', title: 'some title'});

// Sets class and title attributes on a specific element in the current page
tinymce.DOM.setAttribs('mydiv', {'class': 'myclass', title: 'some title'});
Parameters

setHTML

setHTML(elm:Element, html:String)

Sets the specified HTML content inside the element or elements. The HTML will first be processed. This means URLs will get converted, hex color values fixed etc. Check processHTML for details.

Examples
// Sets the inner HTML of all paragraphs in the active editor
tinymce.activeEditor.dom.setHTML(tinymce.activeEditor.dom.select('p'), 'some inner html');

// Sets the inner HTML of an element by id in the document
tinymce.DOM.setHTML('mydiv', 'some inner html');
Parameters

setOuterHTML

setOuterHTML(elm:Element, html:Object)

Sets the specified outer HTML on an element or elements.

Examples
// Sets the outer HTML of all paragraphs in the active editor
tinymce.activeEditor.dom.setOuterHTML(tinymce.activeEditor.dom.select('p'), '<div>some html</div>');

// Sets the outer HTML of an element by id in the document
tinymce.DOM.setOuterHTML('mydiv', '<div>some html</div>');
Parameters

setStyle

setStyle(elm:String, name:String, value:String)

Sets the CSS style value on a HTML element. The name can be a camelcase string or the CSS style name like background-color.

Examples
// Sets a style value on all paragraphs in the currently active editor
tinymce.activeEditor.dom.setStyle(tinymce.activeEditor.dom.select('p'), 'background-color', 'red');

// Sets a style value to an element by id in the current document
tinymce.DOM.setStyle('mydiv', 'background-color', 'red');
Parameters

setStyles

setStyles(elm:Element, styles:Object)

Sets multiple styles on the specified element(s).

Examples
// Sets styles on all paragraphs in the currently active editor
tinymce.activeEditor.dom.setStyles(tinymce.activeEditor.dom.select('p'), {'background-color': 'red', 'color': 'green'});

// Sets styles to an element by id in the current document
tinymce.DOM.setStyles('mydiv', {'background-color': 'red', 'color': 'green'});
Parameters

show

show(elm:String)

Shows the specified element(s) by ID by setting the "display" style.

Parameters

split

split(parentElm:Element, splitElm:Element, replacementElm:Element):Element

Splits an element into two new elements and places the specified split element or elements between the new ones. For example splitting the paragraph at the bold element in this example

abcabc123

would produce

abc

abc

123

.

Parameters
Return value

toHex

toHex(rgbVal:String):String

Parses the specified RGB color value and returns a hex version of that color.

Parameters
Return value

toggleClass

toggleClass(elm:Element, cls:[type], state:[type])

Toggles the specified class on/off.

Parameters

unbind

unbind(target:Element, name:String, func:function):bool, Array

Removes the specified event handler by name and function from an element or collection of elements.

Parameters
Return value

uniqueId

uniqueId(prefix:String):String

Returns a unique id. This can be useful when generating elements on the fly. This method will not check if the element already exists.

Parameters
Return value

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.