CKEditor 4 Documentation

CKEDITOR.dom.element

Hierarchy

Inherited mixins

Subclasses

Files

Represents a DOM element.

// Create a new <span> element.
var element = new CKEDITOR.dom.element( 'span' );

// Create an element based on a native DOM element.
var element = new CKEDITOR.dom.element( document.getElementById( 'myId' ) );
Defined By

Properties

The native DOM object represented by this class instance. ...

The native DOM object represented by this class instance.

var element = new CKEDITOR.dom.element( 'span' );
alert( element.$.nodeType ); // '1'
CKEDITOR.dom.element
view source
: Numberreadonly
The node type. ...

The node type. This is a constant value set to CKEDITOR.NODE_ELEMENT.

Defaults to: CKEDITOR.NODE_ELEMENT

Methods

Defined By

Instance methods

CKEDITOR.dom.element
view source
new( element, [ownerDocument] ) : CKEDITOR.dom.element
Creates an element class instance. ...

Creates an element class instance.

Parameters

  • element : Object/String

    A native DOM element or the element name for new elements.

  • ownerDocument : CKEDITOR.dom.document (optional)

    The document that will contain the element in case of element creation.

Returns

Overrides: CKEDITOR.dom.node.constructor

CKEDITOR.dom.element
view source
( className ) : CKEDITOR.dom.elementchainable
Adds a CSS class to the element. ...

Adds a CSS class to the element. It appends the class to the already existing names.

var element = new CKEDITOR.dom.element( 'div' );
element.addClass( 'classA' ); // <div class="classA">
element.addClass( 'classB' ); // <div class="classA classB">
element.addClass( 'classA' ); // <div class="classA classB">

Parameters

  • className : String

    The name of the class to be added.

Returns

CKEDITOR.dom.element
view source
( node, [toStart] ) : CKEDITOR.dom.node
Append a node as a child of this element. ...

Append a node as a child of this element.

var p = new CKEDITOR.dom.element( 'p' );

var strong = new CKEDITOR.dom.element( 'strong' );
p.append( strong );

var em = p.append( 'em' );

// Result: '<p><strong></strong><em></em></p>'

Parameters

  • node : CKEDITOR.dom.node/String

    The node or element name to be appended.

  • toStart : Boolean (optional)

    Indicates that the element is to be appended at the start.

    Defaults to: false

Returns

CKEDITOR.dom.element
view source
( [force] )
Appends a <br> filler element to this element if the filler is not present already. ...

Appends a <br> filler element to this element if the filler is not present already. By default filler is appended only if CKEDITOR.env.needsBrFiller is true, however when force is set to true filler will be appended regardless of the environment.

Parameters

  • force : Boolean (optional)

    Append filler regardless of the environment.

CKEDITOR.dom.element
view source
( html )
Append HTML as a child(ren) of this element. ...

Append HTML as a child(ren) of this element.

Parameters

  • html : String
CKEDITOR.dom.element
view source
( text ) : CKEDITOR.dom.node
Append text to this element. ...

Append text to this element.

var p = new CKEDITOR.dom.element( 'p' );
p.appendText( 'This is' );
p.appendText( ' some text' );

// Result: '<p>This is some text</p>'

Parameters

  • text : String

    The text to be appended.

Returns

Makes this node a child of another element. ...

Makes this node a child of another element.

var p = new CKEDITOR.dom.element( 'p' );
var strong = new CKEDITOR.dom.element( 'strong' );
strong.appendTo( p );

// Result: '<p><strong></strong></p>'.

Parameters

Returns

CKEDITOR.dom.element
view source
( parent )
Breaks one of the ancestor element in the element position, moving this element between the broken parts. ...

Breaks one of the ancestor element in the element position, moving this element between the broken parts.

// Before breaking:
//      <b>This <i>is some<span /> sample</i> test text</b>
// If "element" is <span /> and "parent" is <i>:
//      <b>This <i>is some</i><span /><i> sample</i> test text</b>
element.breakParent( parent );

// Before breaking:
//      <b>This <i>is some<span /> sample</i> test text</b>
// If "element" is <span /> and "parent" is <b>:
//      <b>This <i>is some</i></b><span /><b><i> sample</i> test text</b>
element.breakParent( parent );

Parameters

Register event handler under the capturing stage on supported target. ...

Register event handler under the capturing stage on supported target.

Removes any data stored on this object. ...

Removes any data stored on this object. To avoid memory leaks we must assure that there are no references left after the object is no longer needed.

( [includeChildren], [cloneId] ) : CKEDITOR.dom.node
Clone this node. ...

Clone this node.

Note: Values set by {setCustomData} won't be available in the clone.

Parameters

  • includeChildren : Boolean (optional)

    If true then all node's children will be cloned recursively.

    Defaults to: false

  • cloneId : Boolean (optional)

    Whether ID attributes should be cloned too.

    Defaults to: false

Returns

CKEDITOR.dom.element
view source
( node ) : Boolean
Checks if this element contains given node. ...

Checks if this element contains given node.

Parameters

Returns

  • Boolean
CKEDITOR.dom.element
view source
( dest, skipAttributes )
Copy all the attributes from one node to the other, kinda like a clone skipAttributes is an object with the attribute...

Copy all the attributes from one node to the other, kinda like a clone skipAttributes is an object with the attributes that must not be copied.

Parameters

  • dest : CKEDITOR.dom.element

    The destination element.

  • skipAttributes : Object

    A dictionary of attributes to skip.

CKEDITOR.dom.element
view source
( name, [value] )
Gets, sets and removes custom data to be stored as HTML5 data-* attributes. ...

Gets, sets and removes custom data to be stored as HTML5 data-* attributes.

element.data( 'extra-info', 'test' );   // Appended the attribute data-extra-info="test" to the element.
alert( element.data( 'extra-info' ) );  // 'test'
element.data( 'extra-info', false );    // Remove the data-extra-info attribute from the element.

Parameters

  • name : String

    The name of the attribute, excluding the data- part.

  • value : String (optional)

    The value to set. If set to false, the attribute will be removed.

Predefine some intrinsic properties on a specific event name. ...

Predefine some intrinsic properties on a specific event name.

Parameters

  • name : String

    The event name

  • meta : Object
    • errorProof : (optional)

      Whether the event firing should catch error thrown from a per listener call.

      Defaults to: false

CKEDITOR.dom.element
view source
( )
Disables browser's context menu in this element. ...

Disables browser's context menu in this element.

Determines whether the specified object is equal to the current object. ...

Determines whether the specified object is equal to the current object.

var doc = new CKEDITOR.dom.document( document );
alert( doc.equals( CKEDITOR.document ) );   // true
alert( doc == CKEDITOR.document );          // false

Parameters

  • object : Object

    The object to compare with the current object.

Returns

  • Boolean

    true if the object is equal.

CKEDITOR.dom.element
view source
( selector ) : CKEDITOR.dom.nodeList
Returns list of elements within this element that match specified selector. ...

Returns list of elements within this element that match specified selector.

Notes:

  • Not available in IE7.
  • Returned list is not a live collection (like a result of native querySelectorAll).
  • Unlike native querySelectorAll this method ensures selector contextualization. This is:

      HTML:       '<body><div><i>foo</i></div></body>'
      Native:     div.querySelectorAll( 'body i' ) // ->      [ <i>foo</i> ]
      Method:     div.find( 'body i' ) // ->                  []
                  div.find( 'i' ) // ->                       [ <i>foo</i> ]
    

Available since: 4.3

Parameters

  • selector : String

Returns

CKEDITOR.dom.element
view source
( selector ) : CKEDITOR.dom.element
Returns first element within this element that matches specified selector. ...

Returns first element within this element that matches specified selector.

Notes:

  • Not available in IE7.
  • Unlike native querySelectorAll this method ensures selector contextualization. This is:

      HTML:       '<body><div><i>foo</i></div></body>'
      Native:     div.querySelector( 'body i' ) // ->         <i>foo</i>
      Method:     div.findOne( 'body i' ) // ->               null
                  div.findOne( 'i' ) // ->                    <i>foo</i>
    

Available since: 4.3

Parameters

  • selector : String

Returns

( eventName, [data], [editor] ) : Boolean/Object
Fires an specific event in the object. ...

Fires an specific event in the object. All registered listeners are called at this point.

someObject.on( 'someEvent', function() { ... } );
someObject.on( 'someEvent', function() { ... } );
someObject.fire( 'someEvent' );             // Both listeners are called.

someObject.on( 'someEvent', function( event ) {
    alert( event.data );                    // 'Example'
} );
someObject.fire( 'someEvent', 'Example' );

Parameters

Returns

  • Boolean/Object

    A boolean indicating that the event is to be canceled, or data returned by one of the listeners.

( eventName, [data], [editor] ) : Boolean/Object
Fires an specific event in the object, releasing all listeners registered to that event. ...

Fires an specific event in the object, releasing all listeners registered to that event. The same listeners are not called again on successive calls of it or of fire.

someObject.on( 'someEvent', function() { ... } );
someObject.fire( 'someEvent' );         // Above listener called.
someObject.fireOnce( 'someEvent' );     // Above listener called.
someObject.fire( 'someEvent' );         // No listeners called.

Parameters

Returns

  • Boolean/Object

    A booloan indicating that the event is to be canceled, or data returned by one of the listeners.

CKEDITOR.dom.element
view source
( defer )
Moves the selection focus to this element. ...

Moves the selection focus to this element.

var element = CKEDITOR.document.getById( 'myTextarea' );
element.focus();

Parameters

  • defer : Boolean

    Whether to asynchronously defer the execution by 100 ms.

CKEDITOR.dom.element
view source
( [ignoreChildren], [indexToUse] )
Moves the UI focus to the element following this element in the tabindex order. ...

Moves the UI focus to the element following this element in the tabindex order.

var element = CKEDITOR.document.getById( 'example' );
element.focusNext();

Parameters

  • ignoreChildren : Boolean (optional)

    Defaults to: false

  • indexToUse : Number (optional)
CKEDITOR.dom.element
view source
( [ignoreChildren], [indexToUse] )
Moves the UI focus to the element before this element in the tabindex order. ...

Moves the UI focus to the element before this element in the tabindex order.

var element = CKEDITOR.document.getById( 'example' );
element.focusPrevious();

Parameters

  • ignoreChildren : Boolean (optional)

    Defaults to: false

  • indexToUse : Number (optional)
CKEDITOR.dom.element
view source
( callback, [type], [skipRoot] )
Traverse the DOM of this element (inclusive), executing a callback for each node. ...

Traverse the DOM of this element (inclusive), executing a callback for each node.

var element = CKEDITOR.dom.element.createFromHtml( '<div><p>foo<b>bar</b>bom</p></div>' );
element.forEach( function( node ) {
    console.log( node );
} );
// Will log:
// 1. <div> element,
// 2. <p> element,
// 3. "foo" text node,
// 4. <b> element,
// 5. "bar" text node,
// 6. "bom" text node.

Available since: 4.3

Parameters

  • callback : Function

    Function to be executed on every node. If callback returns false descendants of the node will be ignored.

    Parameters

  • type : Number (optional)

    If specified callback will be executed only on nodes of this type.

  • skipRoot : Boolean (optional)

    Don't execute callback on this element.

Retrieves a uniquely identifiable tree address for this node. ...

Retrieves a uniquely identifiable tree address for this node. The tree address returned is an array of integers, with each integer indicating a child index of a DOM node, starting from document.documentElement.

For example, assuming <body> is the second child of <html> (<head> being the first), and we would like to address the third child under the fourth child of <body>, the tree address returned would be: [1, 3, 2].

The tree address cannot be used for finding back the DOM tree node once the DOM tree structure has been modified.

Parameters

  • normalized : Boolean (optional)

    See getIndex.

    Defaults to: false

Returns

  • Array

    The address.

Gets the closest ancestor node of this node, specified by its name or using an evaluator function. ...

Gets the closest ancestor node of this node, specified by its name or using an evaluator function.

// Suppose we have the following HTML structure:
// <div id="outer"><div id="inner"><p><b>Some text</b></p></div></div>
// If node == <b>
ascendant = node.getAscendant( 'div' );             // ascendant == <div id="inner">
ascendant = node.getAscendant( 'b' );               // ascendant == null
ascendant = node.getAscendant( 'b', true );         // ascendant == <b>
ascendant = node.getAscendant( { div:1, p:1 } );    // Searches for the first 'div' or 'p': ascendant == <div id="inner">

// Using custom evaluator:
ascendant = node.getAscendant( function( el ) {
    return el.getId() == 'inner';
} );
// ascendant == <div id="inner">

Available since: 3.6.1

Parameters

  • query : String/Function/Object

    The name of the ancestor node to search or an object with the node names to search for or evaluator function.

  • includeSelf : Boolean (optional)

    Whether to include the current node in the search.

Returns

CKEDITOR.dom.element
view source
( name ) : String
Gets the value of an element attribute. ...

Gets the value of an element attribute.

var element = CKEDITOR.dom.element.createFromHtml( '<input type="text" />' );
alert( element.getAttribute( 'type' ) ); // 'text'

Parameters

  • name : String

    The attribute name.

Returns

  • String

    The attribute value or null if not defined.

CKEDITOR.dom.element
view source
( ) : CKEDITOR.dom.node/Boolean
Checks if there's a filler node at the end of an element, and returns it. ...

Checks if there's a filler node at the end of an element, and returns it.

Returns

CKEDITOR.dom.element
view source
( indices ) : CKEDITOR.dom.node
Gets a DOM tree descendant under the current node. ...

Gets a DOM tree descendant under the current node.

var strong = p.getChild( 0 );

Parameters

  • indices : Array/Number

    The child index or array of child indices under the node.

Returns

  • CKEDITOR.dom.node

    The specified DOM child under the current node. Null if child does not exist.

CKEDITOR.dom.element
view source
( ) : Number
Gets number of element's children. ...

Gets number of element's children.

Returns

  • Number
Gets the nodes list containing all children of this element. ...

Gets the nodes list containing all children of this element.

Returns

CKEDITOR.dom.element
view source
( ) : Object
Retrieve the bounding rectangle of the current element, in pixels, relative to the upper-left corner of the browser's...

Retrieve the bounding rectangle of the current element, in pixels, relative to the upper-left corner of the browser's client area.

Returns

  • Object

    The dimensions of the DOM element including left, top, right, bottom, width and height.

...

Parameters

  • node : Object
CKEDITOR.dom.element
view source
( propertyName ) : String
Gets the current computed value of one of the element CSS style properties. ...

Gets the current computed value of one of the element CSS style properties.

var element = new CKEDITOR.dom.element( 'span' );
alert( element.getComputedStyle( 'display' ) ); // 'inline'

Parameters

  • propertyName : String

    The style property name.

Returns

  • String

    The property value.

Gets the value set to a data slot in this object. ...

Gets the value set to a data slot in this object.

var element = new CKEDITOR.dom.element( 'span' );
alert( element.getCustomData( 'hasCustomData' ) );      // e.g. 'true'
alert( element.getCustomData( 'nonExistingKey' ) );     // null

Parameters

  • key : String

    The key used to identify the data slot.

Returns

  • Object

    This value set to the data slot.

CKEDITOR.dom.element
view source
( useComputed )
Gets element's direction. ...

Gets element's direction. Supports both CSS direction prop and dir attr.

Parameters

  • useComputed : Object
Gets the document containing this element. ...

Gets the document containing this element.

var element = CKEDITOR.document.getById( 'example' );
alert( element.getDocument().equals( CKEDITOR.document ) ); // true

Returns

CKEDITOR.dom.element
view source
( [refDocument] ) : Object
Gets this element's position in document. ...

Gets this element's position in document.

Parameters

Returns

  • Object

    Element's position.

    • x : Number
    • y : Number

      refDocument

CKEDITOR.dom.element
view source
( ) : Object
Gets the DTD entries for this element. ...

Gets the DTD entries for this element.

Returns

  • Object

    An object containing the list of elements accepted by this element.

CKEDITOR.dom.element
view source
( ) : CKEDITOR.editor
Retrieves an editor instance which is based on this element (if any). ...

Retrieves an editor instance which is based on this element (if any). It basically loops over CKEDITOR.instances in search for an instance that uses the element.

var element = new CKEDITOR.dom.element( 'div' );
element.appendTo( CKEDITOR.document.getBody() );
CKEDITOR.replace( element );
alert( element.getEditor().name ); // 'editor1'

Returns

CKEDITOR.dom.element
view source
( tagName )
Gets all this element's descendants having given tag name. ...

Gets all this element's descendants having given tag name.

Parameters

  • tagName : String
CKEDITOR.dom.element
view source
( evaluator ) : CKEDITOR.dom.node
Gets the first child node of this element. ...

Gets the first child node of this element.

var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
var first = element.getFirst();
alert( first.getName() ); // 'b'

Parameters

  • evaluator : Function

    Filtering the result node.

Returns

Returns the inner document of this <iframe> element. ...

Returns the inner document of this <iframe> element.

Returns

CKEDITOR.dom.element
view source
( ) : String
Gets the inner HTML of this element. ...

Gets the inner HTML of this element.

var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
alert( element.getHtml() ); // '<b>Example</b>'

Returns

  • String

    The inner HTML of this element.

CKEDITOR.dom.element
view source
( ) : String
Gets the value of the id attribute of this element. ...

Gets the value of the id attribute of this element.

var element = CKEDITOR.dom.element.createFromHtml( '<p id="myId"></p>' );
alert( element.getId() ); // 'myId'

Returns

  • String

    The element id, or null if not available.

Get index of a node in an array of its parent.childNodes. ...

Get index of a node in an array of its parent.childNodes.

Let's assume having childNodes array:

[ emptyText, element1, text, text, element2 ]
element1.getIndex();        // 1
element1.getIndex( true );  // 0
element2.getIndex();        // 4
element2.getIndex( true );  // 2

Parameters

  • normalized : Boolean

    When true empty text nodes and one followed by another one text node are not counted in.

Returns

  • Number

    Index of a node.

CKEDITOR.dom.element
view source
( evaluator ) : CKEDITOR.dom.node
See getFirst. ...

See getFirst.

Parameters

  • evaluator : Function

    Filtering the result node.

Returns

CKEDITOR.dom.element
view source
( ) : String
Gets the element name (tag name). ...

Gets the element name (tag name). The returned name is guaranteed to be always full lowercased.

var element = new CKEDITOR.dom.element( 'span' );
alert( element.getName() ); // 'span'

Returns

  • String

    The element name.

CKEDITOR.dom.element
view source
( ) : String
Gets the value of the name attribute of this element. ...

Gets the value of the name attribute of this element.

var element = CKEDITOR.dom.element.createFromHtml( '<input name="myName"></input>' );
alert( <b>element.getNameAtt()</b> ); // 'myName'

Returns

  • String

    The element name, or null if not available.

Gets the node that follows this element in its parent's child list. ...

Gets the node that follows this element in its parent's child list.

var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b><i>next</i></div>' );
var last = element.getFirst().getNext();
alert( last.getName() ); // 'i'

Parameters

  • evaluator : Function (optional)

    Filtering the result node.

Returns

( startFromSibling, nodeType, guard )
...

Parameters

  • startFromSibling : Object
  • nodeType : Object
  • guard : Object
CKEDITOR.dom.element
view source
( ) : String
Gets the outer (inner plus tags) HTML of this element. ...

Gets the outer (inner plus tags) HTML of this element.

var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' );
alert( element.getOuterHtml() ); // '<div class="bold"><b>Example</b></div>'

Returns

  • String

    The outer HTML of this element.

Gets the parent element for this node. ...

Gets the parent element for this node.

var node = editor.document.getBody().getFirst();
var parent = node.getParent();
alert( parent.getName() ); // 'body'

Parameters

Returns

Returns array containing node parents and node itself. ...

Returns array containing node parents and node itself. By default nodes are in descending order.

// Assuming that body has paragraph as first child.
var node = editor.document.getBody().getFirst();
var parents = node.getParents();
alert( parents[ 0 ].getName() + ',' + parents[ 2 ].getName() ); // 'html,p'

Parameters

  • closerFirst : Boolean (optional)

    Determines order of returned nodes.

    Defaults to: false

Returns

...

Parameters

  • otherNode : Object
Gets closest positioned (position != static) ancestor. ...

Gets closest positioned (position != static) ancestor.

Returns

Gets the node that preceed this element in its parent's child list. ...

Gets the node that preceed this element in its parent's child list.

var element = CKEDITOR.dom.element.createFromHtml( '<div><i>prev</i><b>Example</b></div>' );
var first = element.getLast().getPrev();
alert( first.getName() ); // 'i'

Parameters

  • evaluator : Function (optional)

    Filtering the result node.

Returns

( startFromSibling, nodeType, guard )
...

Parameters

  • startFromSibling : Object
  • nodeType : Object
  • guard : Object
Get the private _ object which is bound to the native DOM object using getCustomData. ...

Get the private _ object which is bound to the native DOM object using getCustomData.

var elementA = new CKEDITOR.dom.element( nativeElement );
elementA.getPrivate().value = 1;
...
var elementB = new CKEDITOR.dom.element( nativeElement );
elementB.getPrivate().value; // 1

Returns

  • Object

    The private object.

CKEDITOR.dom.element
view source
( type, isBorderBox )
Gets the element size, possibly considering the box model. ...

Gets the element size, possibly considering the box model.

Parameters

  • type : 'width'/'height'

    The dimension to get.

  • isBorderBox : Boolean

    Get the size based on the border box model.

CKEDITOR.dom.element
view source
( name ) : String
Gets CSS style value. ...

Gets CSS style value.

Parameters

  • name : String

    The CSS property name.

Returns

  • String

    Style value.

CKEDITOR.dom.element
view source
( ) : Number
Gets the computed tabindex for this element. ...

Gets the computed tabindex for this element.

var element = CKEDITOR.document.getById( 'myDiv' );
alert( element.getTabIndex() ); // (e.g.) '-1'

Returns

  • Number

    The tabindex value.

CKEDITOR.dom.element
view source
( ) : String
Gets the text value of this element. ...

Gets the text value of this element.

Only in IE (which uses innerText), <br> will cause linebreaks, and sucessive whitespaces (including line breaks) will be reduced to a single space. This behavior is ok for us, for now. It may change in the future.

var element = CKEDITOR.dom.element.createFromHtml( '<div>Sample <i>text</i>.</div>' );
alert( <b>element.getText()</b> ); // 'Sample text.'

Returns

  • String

    The text value.

Gets an ID that can be used to identify this DOM object in the running session. ...

Gets an ID that can be used to identify this DOM object in the running session.

Note: This method does not work on text nodes prior to Internet Explorer 9.

Returns

  • Number

    A unique ID.

CKEDITOR.dom.element
view source
( ) : String
Gets the value set to this element. ...

Gets the value set to this element. This value is usually available for form field elements.

Returns

  • String

    The element value.

CKEDITOR.dom.element
view source
( ) : CKEDITOR.dom.window
Gets the window object that contains this element. ...

Gets the window object that contains this element.

Returns

...

Parameters

  • name : Object
  • includeSelf : Object
CKEDITOR.dom.element
view source
( name ) : Boolean
Checks if the specified attribute is defined for this element. ...

Checks if the specified attribute is defined for this element.

Parameters

  • name : String

    The attribute name.

Returns

  • Boolean

    true if the specified attribute is defined.

CKEDITOR.dom.element
view source
( ) : Boolean
Checks if the element has any defined attributes. ...

Checks if the element has any defined attributes.

var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test">Example</div>' );
alert( element.hasAttributes() ); // true

var element = CKEDITOR.dom.element.createFromHtml( '<div>Example</div>' );
alert( element.hasAttributes() ); // false

Returns

  • Boolean

    True if the element has attributes.

CKEDITOR.dom.element
view source
( className ) : Boolean
Checks if element has class name. ...

Checks if element has class name.

Parameters

  • className : String

Returns

  • Boolean
Checks if there is any listener registered to a given event. ...

Checks if there is any listener registered to a given event.

var myListener = function() { ... };
someObject.on( 'someEvent', myListener );
alert( someObject.hasListeners( 'someEvent' ) );    // true
alert( someObject.hasListeners( 'noEvent' ) );      // false

Parameters

  • eventName : String

    The event name.

Returns

  • Boolean
Check if node is succeeded by any sibling. ...

Check if node is succeeded by any sibling.

Returns

  • Boolean
Check if node is preceded by any sibling. ...

Check if node is preceded by any sibling.

Returns

  • Boolean
CKEDITOR.dom.element
view source
( )
Hides this element (sets display: none). ...

Hides this element (sets display: none).

var element = CKEDITOR.document.getById( 'myElement' );
element.hide();
Inserts this element after a node. ...

Inserts this element after a node.

var em = new CKEDITOR.dom.element( 'em' );
var strong = new CKEDITOR.dom.element( 'strong' );
strong.insertAfter( em );

// Result: '<em></em><strong></strong>'

Parameters

Returns

Inserts this element before a node. ...

Inserts this element before a node.

var em = new CKEDITOR.dom.element( 'em' );
var strong = new CKEDITOR.dom.element( 'strong' );
strong.insertBefore( em );

// result: '<strong></strong><em></em>'

Parameters

Returns

Inserts node before this node. ...

Inserts node before this node.

var em = new CKEDITOR.dom.element( 'em' );
var strong = new CKEDITOR.dom.element( 'strong' );
strong.insertBeforeMe( em );

// result: '<em></em><strong></strong>'

Parameters

Returns

CKEDITOR.dom.element
view source
( name ) : Boolean
Checks if the element name matches the specified criteria. ...

Checks if the element name matches the specified criteria.

var element = new CKEDITOR.element( 'span' );
alert( element.is( 'span' ) );          // true
alert( element.is( 'p', 'span' ) );     // true
alert( element.is( 'p' ) );             // false
alert( element.is( 'p', 'div' ) );      // false
alert( element.is( { p:1,span:1 } ) );  // true

Parameters

  • name : String.../Object

    One or more names to be checked, or a CKEDITOR.dtd object.

Returns

  • Boolean

    true if the element name matches any of the names.

CKEDITOR.dom.element
view source
( [customNodeNames] ) : Boolean
Checks whether element is displayed as a block. ...

Checks whether element is displayed as a block.

Parameters

  • customNodeNames : Object (optional)

    Custom list of nodes which will extend default CKEDITOR.dtd.$block list.

Returns

  • Boolean
CKEDITOR.dom.element
view source
( [textCursor] )
Decide whether one element is able to receive cursor. ...

Decide whether one element is able to receive cursor.

Parameters

  • textCursor : Boolean (optional)

    Only consider element that could receive text child.

    Defaults to: true

CKEDITOR.dom.element
view source
( ) : Boolean
Whether it's an empty inline elements which has no visual impact when removed. ...

Whether it's an empty inline elements which has no visual impact when removed.

Returns

  • Boolean
CKEDITOR.dom.element
view source
( otherElement ) : Boolean
Compare this element's inner html, tag name, attributes, etc. ...

Compare this element's inner html, tag name, attributes, etc. with other one.

See W3C's DOM Level 3 spec - node#isEqualNode for more details.

Parameters

Returns

  • Boolean
Checks if this node is read-only (should not be changed). ...

Checks if this node is read-only (should not be changed).

Note: When attributeCheck is not used, this method only work for elements that are already presented in the document, otherwise the result is not guaranteed, it's mainly for performance consideration.

// For the following HTML:
// <div contenteditable="false">Some <b>text</b></div>

// If "ele" is the above <div>
element.isReadOnly(); // true

Available since: 3.5

Returns

  • Boolean
CKEDITOR.dom.element
view source
( ) : Boolean
Checks if this element is visible. ...

Checks if this element is visible. May not work if the element is child of an element with visibility set to hidden, but works well on the great majority of cases.

Returns

  • Boolean

    True if the element is visible.

CKEDITOR.dom.element
view source
( [inlineOnly] )
Merges sibling elements that are identical to this one. ...

Merges sibling elements that are identical to this one.

Identical child elements are also merged. For example:

<b><i></i></b><b><i></i></b> => <b><i></i></b>

Parameters

  • inlineOnly : Boolean (optional)

    Allow only inline elements to be merged.

    Defaults to: true

...

Parameters

  • target : Object
  • toStart : Object
CKEDITOR.dom.element
view source
( target, [toStart] )
Moves this element's children to the target element. ...

Moves this element's children to the target element.

Parameters

  • target : CKEDITOR.dom.element
  • toStart : Boolean (optional)

    Insert moved children at the beginning of the target element.

    Defaults to: false

( eventName, listenerFunction, [scopeObj], [listenerData], [priority] ) : Object
Registers a listener to a specific event in the current object. ...

Registers a listener to a specific event in the current object.

someObject.on( 'someEvent', function() {
    alert( this == someObject );        // true
} );

someObject.on( 'someEvent', function() {
    alert( this == anotherObject );     // true
}, anotherObject );

someObject.on( 'someEvent', function( event ) {
    alert( event.listenerData );        // 'Example'
}, null, 'Example' );

someObject.on( 'someEvent', function() { ... } );                       // 2nd called
someObject.on( 'someEvent', function() { ... }, null, null, 100 );      // 3rd called
someObject.on( 'someEvent', function() { ... }, null, null, 1 );        // 1st called

Parameters

  • eventName : String

    The event name to which listen.

  • listenerFunction : Function

    The function listening to the event. A single CKEDITOR.eventInfo object instanced is passed to this function containing all the event data.

  • scopeObj : Object (optional)

    The object used to scope the listener call (the this object). If omitted, the current object is used.

  • listenerData : Object (optional)

    Data to be sent as the CKEDITOR.eventInfo.listenerData when calling the listener.

  • priority : Number (optional)

    The listener priority. Lower priority listeners are called first. Listeners with the same priority value are called in registration order.

    Defaults to: 10

Returns

  • Object

    An object containing the removeListener function, which can be used to remove the listener at any time.

Similiar with on but the listener will be called only once upon the next event firing. ...

Similiar with on but the listener will be called only once upon the next event firing.

CKEDITOR.event.on

( [preserveChildren] ) : CKEDITOR.dom.nodechainable
Removes this node from the document DOM. ...

Removes this node from the document DOM.

var element = CKEDITOR.document.getById( 'MyElement' );
element.remove();

Parameters

  • preserveChildren : Boolean (optional)

    Indicates that the children elements must remain in the document, removing only the outer tags.

    Defaults to: false

Returns

Removes any listener set on this object. ...

Removes any listener set on this object.

To avoid memory leaks we must assure that there are no references left after the object is no longer needed.

Overrides: CKEDITOR.event.removeAllListeners

CKEDITOR.dom.element
view source
( name )
Removes an attribute from the element. ...

Removes an attribute from the element.

var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
element.removeAttribute( 'class' );

Parameters

  • name : String

    The attribute name.

CKEDITOR.dom.element
view source
( [attributes] )
Removes all element's attributes or just given ones. ...

Removes all element's attributes or just given ones.

Parameters

  • attributes : Array (optional)

    The array with attributes names.

CKEDITOR.dom.element
view source
( className ) : CKEDITOR.dom.elementchainable
Removes a CSS class name from the elements classes. ...

Removes a CSS class name from the elements classes. Other classes remain untouched.

var element = new CKEDITOR.dom.element( 'div' );
element.addClass( 'classA' );       // <div class="classA">
element.addClass( 'classB' );       // <div class="classA classB">
element.removeClass( 'classA' );    // <div class="classB">
element.removeClass( 'classB' );    // <div>

Parameters

  • className : String

    The name of the class to remove.

Returns

Removes the value in data slot under given key. ...

Removes the value in data slot under given key.

Parameters

  • key : String

Returns

  • Object

    Removed value or null if not found.

( eventName, listenerFunction )
Unregisters a listener function from being called at the specified event. ...

Unregisters a listener function from being called at the specified event. No errors are thrown if the listener has not been registered previously.

var myListener = function() { ... };
someObject.on( 'someEvent', myListener );
someObject.fire( 'someEvent' );                 // myListener called.
someObject.removeListener( 'someEvent', myListener );
someObject.fire( 'someEvent' );                 // myListener not called.

Parameters

  • eventName : String

    The event name.

  • listenerFunction : Function

    The listener function to unregister.

CKEDITOR.dom.element
view source
( name )
Removes a style from the element. ...

Removes a style from the element.

var element = CKEDITOR.dom.element.createFromHtml( '<div style="display:none"></div>' );
element.removeStyle( 'display' );

Parameters

  • name : String

    The style name.

CKEDITOR.dom.element
view source
( newTag )
Changes the tag name of the current element. ...

Changes the tag name of the current element.

Parameters

  • newTag : String

    The new tag for the element.

...

Parameters

  • nodeToReplace : Object
CKEDITOR.dom.element
view source
( parent, [alignToTop], [hscroll] )
Make any page element visible inside one of the ancestors by scrolling the parent. ...

Make any page element visible inside one of the ancestors by scrolling the parent.

Parameters

  • parent : CKEDITOR.dom.element/CKEDITOR.dom.window

    The container to scroll into.

  • alignToTop : Boolean (optional)

    Align the element's top side with the container's when true is specified; align the bottom with viewport bottom when false is specified. Otherwise scroll on either side with the minimum amount to show the element.

  • hscroll : Boolean (optional)

    Whether horizontal overflow should be considered.

CKEDITOR.dom.element
view source
( [alignToTop] )
Make any page element visible inside the browser viewport. ...

Make any page element visible inside the browser viewport.

Parameters

  • alignToTop : Boolean (optional)

    Defaults to: false

CKEDITOR.dom.element
view source
( name, value ) : CKEDITOR.dom.element
Sets the value of an element attribute. ...

Sets the value of an element attribute.

var element = CKEDITOR.document.getById( 'myElement' );
element.setAttribute( 'class', 'myClass' );
element.setAttribute( 'title', 'This is an example' );

Parameters

  • name : String

    The name of the attribute.

  • value : String

    The value to be set to the attribute.

Returns

CKEDITOR.dom.element
view source
( attributesPairs ) : CKEDITOR.dom.elementchainable
Sets the value of several element attributes. ...

Sets the value of several element attributes.

var element = CKEDITOR.document.getById( 'myElement' );
element.setAttributes( {
    'class':    'myClass',
    title:      'This is an example'
} );

Parameters

  • attributesPairs : Object

    An object containing the names and values of the attributes.

Returns

Sets a data slot value for this object. ...

Sets a data slot value for this object. These values are shared by all instances pointing to that same DOM object.

Note: The created data slot is only guarantied to be available on this unique dom node, thus any wish to continue access it from other element clones (either created by clone node or from innerHtml) will fail, for such usage, please use CKEDITOR.dom.element.setAttribute instead.

Note: This method does not work on text nodes prior to Internet Explorer 9.

var element = new CKEDITOR.dom.element( 'span' );
element.setCustomData( 'hasCustomData', true );

Parameters

  • key : String

    A key used to identify the data slot.

  • value : Object

    The value to set to the data slot.

Returns

CKEDITOR.dom.element
view source
( html ) : String
Sets the inner HTML of this element. ...

Sets the inner HTML of this element.

var p = new CKEDITOR.dom.element( 'p' );
p.setHtml( '<b>Inner</b> HTML' );

// Result: '<p><b>Inner</b> HTML</p>'

Parameters

  • html : String

    The HTML to be set for this element.

Returns

  • String

    The inserted HTML.

CKEDITOR.dom.element
view source
( opacity )
Sets the opacity of an element. ...

Sets the opacity of an element.

var element = CKEDITOR.document.getById( 'myElement' );
element.setOpacity( 0.75 );

Parameters

  • opacity : Number

    A number within the range [0.0, 1.0].

CKEDITOR.dom.element
view source
( type, size, isBorderBox )
Sets the element size considering the box model. ...

Sets the element size considering the box model.

Parameters

  • type : 'width'/'height'

    The dimension to set.

  • size : Number

    The length unit in px.

  • isBorderBox : Boolean

    Apply the size based on the border box model.

CKEDITOR.dom.element
view source
( state, [base], [useAria] )
Switch the class attribute to reflect one of the triple states of an element in one of CKEDITOR.TRISTATE_ON, CKEDITOR...

Switch the class attribute to reflect one of the triple states of an element in one of CKEDITOR.TRISTATE_ON, CKEDITOR.TRISTATE_OFF or CKEDITOR.TRISTATE_DISABLED.

link.setState( CKEDITOR.TRISTATE_ON );
// <a class="cke_on" aria-pressed="true">...</a>
link.setState( CKEDITOR.TRISTATE_OFF );
// <a class="cke_off">...</a>
link.setState( CKEDITOR.TRISTATE_DISABLED );
// <a class="cke_disabled" aria-disabled="true">...</a>

span.setState( CKEDITOR.TRISTATE_ON, 'cke_button' );
// <span class="cke_button_on">...</span>

Parameters

CKEDITOR.dom.element
view source
( name, value ) : CKEDITOR.dom.elementchainable
Sets the value of an element style. ...

Sets the value of an element style.

var element = CKEDITOR.document.getById( 'myElement' );
element.setStyle( 'background-color', '#ff0000' );
element.setStyle( 'margin-top', '10px' );
element.setStyle( 'float', 'right' );

Parameters

  • name : String

    The name of the style. The CSS naming notation must be used (e.g. background-color).

  • value : String

    The value to be set to the style.

Returns

CKEDITOR.dom.element
view source
( stylesPairs ) : CKEDITOR.dom.elementchainable
Sets the value of several element styles. ...

Sets the value of several element styles.

var element = CKEDITOR.document.getById( 'myElement' );
element.setStyles( {
    position:   'absolute',
    float:      'right'
} );

Parameters

  • stylesPairs : Object

    An object containing the names and values of the styles.

Returns

CKEDITOR.dom.element
view source
( text ) : String
Sets the element contents as plain text. ...

Sets the element contents as plain text.

var element = new CKEDITOR.dom.element( 'div' );
element.setText( 'A > B & C < D' );
alert( element.innerHTML ); // 'A &gt; B &amp; C &lt; D'

Parameters

  • text : String

    The text to be set.

Returns

  • String

    The inserted text.

CKEDITOR.dom.element
view source
( value ) : CKEDITOR.dom.elementchainable
Sets the element value. ...

Sets the element value. This function is usually used with form field element.

Parameters

  • value : String

    The element value.

Returns

CKEDITOR.dom.element
view source
( )
Shows this element (displays it). ...

Shows this element (displays it).

var element = CKEDITOR.document.getById( 'myElement' );
element.show();
CKEDITOR.dom.element
view source
( )
Makes the element and its children unselectable. ...

Makes the element and its children unselectable.

var element = CKEDITOR.document.getById( 'myElement' );
element.unselectable();
Defined By

Static methods

CKEDITOR.dom.element
view source
( database )static
...

Parameters

  • database : Object
CKEDITOR.dom.element
view source
( database, element, removeFromDatabase )static
...

Parameters

  • database : Object
  • element : Object
  • removeFromDatabase : Object
CKEDITOR.dom.element
view source
( html ) : CKEDITOR.dom.elementstatic
Creates an instance of the CKEDITOR.dom.element class based on the HTML representation of an element. ...

Creates an instance of the CKEDITOR.dom.element class based on the HTML representation of an element.

var element = CKEDITOR.dom.element.createFromHtml( '<strong class="anyclass">My element</strong>' );
alert( element.getName() ); // 'strong'

Parameters

  • html : String

    The element HTML. It should define only one element in the "root" level. The "root" element can have child nodes, but not siblings.

Returns

CKEDITOR.dom.element
view source
( element ) : CKEDITOR.dom.elementstatic
The the CKEDITOR.dom.element representing and element. ...

The the CKEDITOR.dom.element representing and element. If the element is a native DOM element, it will be transformed into a valid CKEDITOR.dom.element object.

var element = new CKEDITOR.dom.element( 'span' );
alert( element == CKEDITOR.dom.element.get( element ) ); // true

var element = document.getElementById( 'myElement' );
alert( CKEDITOR.dom.element.get( element ).getName() ); // (e.g.) 'p'

Parameters

  • element : String/Object

    Element's id or name or native DOM element.

Returns

CKEDITOR.dom.element
view source
( database, element, name, value )static
...

Parameters

  • database : Object
  • element : Object
  • name : Object
  • value : Object