CKEditor 4 Documentation

CKEDITOR.editable

Hierarchy

Inherited mixins

Files

Editable class which provides all editing related activities by the contenteditable element, dynamically get attached to editor instance.

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.editable
view source
: Boolean
Indicates whether the editable element gained focus. ...

Indicates whether the editable element gained focus.

Defaults to: false

CKEDITOR.editable
view source
: Stringreadonly
Indicates the initialization status of the editable element. ...

Indicates the initialization status of the editable element. The following statuses are available:

  • unloaded – the initial state. The editable's instance was created but is not fully loaded (in particular it has no data).
  • ready – the editable is fully initialized. The ready status is set after the first CKEDITOR.editor.setData is called.
  • detached – the editable was detached.

Defaults to: 'unloaded'

Available since: 4.3.3

The node type. ...

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

Defaults to: CKEDITOR.NODE_ELEMENT

Defined By

Methods

CKEDITOR.editable
view source
new( editor, element ) : CKEDITOR.editable
The constructor only stores generic editable creation logic that is commonly shared among all different editable elem...

The constructor only stores generic editable creation logic that is commonly shared among all different editable elements.Creates an editable class instance.

Parameters

  • editor : CKEDITOR.editor

    The editor instance on which the editable operates.

  • element : HTMLElement/CKEDITOR.dom.element

    Any DOM element that was as the editor's editing container, e.g. it could be either an HTML element with the contenteditable attribute set to the true that handles WYSIWYG editing or a <textarea> element that handles source editing.

Returns

Overrides: CKEDITOR.dom.element.constructor

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">

Note: Since CKEditor 4.5 this method cannot be used with multiple classes ('classA classB').

Parameters

  • className : String

    The name of the class to be added.

Returns

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

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.

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

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

Parameters

  • html : String
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.

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.editable
view source
( className )
Adds a CSS class name to this editable that needs to be removed on detaching. ...

Adds a CSS class name to this editable that needs to be removed on detaching.

Parameters

CKEDITOR.editable
view source
( obj, eventName, listenerFunction, [scopeObj], [listenerData], [priority] ) : Object
Registers an event listener that needs to be removed when detaching this editable. ...

Registers an event listener that needs to be removed when detaching this editable. This means that it will be automatically removed when detach is executed, for example on changing editor mode or destroying editor.

Except for obj all other arguments have the same meaning as in CKEDITOR.event.on.

This method is strongly related to the CKEDITOR.editor.contentDom and CKEDITOR.editor.contentDomUnload events, because they are fired when an editable is being attached and detached. Therefore, this method is usually used in the following way:

editor.on( 'contentDom', function() {
    var editable = editor.editable();
    editable.attachListener( editable, 'mousedown', function() {
        // ...
    } );
} );

This code will attach the mousedown listener every time a new editable is attached to the editor, which in classic (iframe-based) editor happens every time the data or the mode is set. This listener will also be removed when that editable is detached.

It is also possible to attach a listener to another object (e.g. to a document).

editor.on( 'contentDom', function() {
    editor.editable().attachListener( editor.document, 'mousedown', function() {
        // ...
    } );
} );

Parameters

  • obj : CKEDITOR.event

    The element/object to which the listener will be attached. Every object which inherits from CKEDITOR.event may be used including CKEDITOR.dom.element, CKEDITOR.dom.document, and CKEDITOR.editable.

  • eventName : String

    The name of the event that will be listened to.

  • listenerFunction : Function

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

  • 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 the registration order.

    Defaults to: 10

Returns

  • Object

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

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

  • parent : CKEDITOR.dom.element

    The anscestor element to get broken.

  • cloneId : Boolean (optional)

    Whether to preserve ancestor ID attributes while breaking.

    Defaults to: false

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

Register event handler under the capturing stage on supported target.

CKEDITOR.editable
view source
( attr, val )
Make an attribution change that would be reverted on editable detaching. ...

Make an attribution change that would be reverted on editable detaching.

Parameters

  • attr : String

    The attribute name to be changed.

  • val : String

    The value of specified attribute.

Removes any data stored in this object. ...

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

CKEDITOR.editable
view source
( )
Remove all event listeners registered from attachListener. ...

Remove all event listeners registered from attachListener.

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

Clones this node.

Note: Values set by {setCustomData} will not 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

Checks if this element contains given node. ...

Checks if this element contains given node.

Parameters

Returns

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

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.editable
view source
( )
Detaches this editable object from the DOM (removes classes, listeners, etc.) ...

Detaches this editable object from the DOM (removes classes, listeners, etc.)

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.editable
view source
( range, [removeEmptyBlock] ) : CKEDITOR.dom.documentFragment
The base of the CKEDITOR.editor.extractSelectedHtml method. ...

The base of the CKEDITOR.editor.extractSelectedHtml method.

Note: The range is modified so it matches the desired selection after extraction even though the selection is not made.

Available since: 4.5

Parameters

Returns

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

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.editable
view source
( )private
Fixes the selection and focus which may be in incorrect state after editable's inner HTML was overwritten. ...

Fixes the selection and focus which may be in incorrect state after editable's inner HTML was overwritten.

If the editable did not have focus, then the selection will be fixed when the editable is focused for the first time. If the editable already had focus, then the selection will be fixed immediately.

To understand the problem see:

  • http://tests.ckeditor.dev:1030/tests/core/selection/manual/focusaftersettingdata
  • http://tests.ckeditor.dev:1030/tests/core/selection/manual/focusafterundoing
  • http://tests.ckeditor.dev:1030/tests/core/selection/manual/selectionafterfocusing
  • http://tests.ckeditor.dev:1030/tests/plugins/newpage/manual/selectionafternewpage

Available since: 4.4.6

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.

( [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)
( [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)
( 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 an evaluator function.

  • includeSelf : Boolean (optional)

    Whether to include the current node in the search.

Returns

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.

Gets the values of all element attributes. ...

Gets the values of all element attributes.

Parameters

  • exclude : Array

    The names of attributes to be excluded from the returned object.

Returns

  • Object

    An object containing all element attributes with their values.

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

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

Returns

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.

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

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
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.editable
view source
( isSnapshot )
CKEDITOR.editor.getData ...

CKEDITOR.editor.getData

Parameters

  • isSnapshot : Object
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

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

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.

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'

By default this method considers only original DOM elements upon which the editor was created. Setting optimized parameter to false will consider editor editable and its children.

Parameters

  • optimized : Boolean (optional)

    If set to false it will scan every editor editable.

    Defaults to: true

Returns

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

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

Parameters

  • tagName : String
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

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.

The base of the CKEDITOR.editor.getSelectedHtml method. ...

The base of the CKEDITOR.editor.getSelectedHtml method.

Available since: 4.5

Parameters

Returns

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.

Gets the index of a node in an array of its parent.childNodes. ...

Gets the index of a node in an array of its parent.childNodes. Returns -1 if a node does not have a parent or when the normalized argument is set to true and the text node is empty and will be removed during the normalization.

Let us assume having the following childNodes array:

[ emptyText, element1, text, text, element2, emptyText2 ]

emptyText.getIndex()            // 0
emptyText.getIndex( true )      // -1
element1.getIndex();            // 1
element1.getIndex( true );      // 0
element2.getIndex();            // 4
element2.getIndex( true );      // 2
emptyText2.getIndex();          // 5
emptyText2.getIndex( true );    // -1

Parameters

  • normalized : Boolean

    When true, adjacent text nodes are merged and empty text nodes are removed.

Returns

  • Number

    Index of a node or -1 if a node does not have a parent or is removed during the normalization.

See getFirst. ...

See getFirst.

Parameters

  • evaluator : Function

    Filtering the result node.

Returns

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.

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
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 an array containing node parents and the node itself. ...

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

// Assuming that body has paragraph as the 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 the order of returned nodes.

    Defaults to: false

Returns

Determines the position relation between this node and the given CKEDITOR.dom.node in the document. ...

Determines the position relation between this node and the given CKEDITOR.dom.node in the document. This node can be preceding (CKEDITOR.POSITION_PRECEDING) or following (CKEDITOR.POSITION_FOLLOWING) the given node. This node can also contain (CKEDITOR.POSITION_CONTAINS) or be contained by (CKEDITOR.POSITION_IS_CONTAINED) the given node. The function returns a bitmask of constants listed above or CKEDITOR.POSITION_IDENTICAL if the given node is the same as this node.

Parameters

Returns

  • Number

    Position relation between this node and given node.

Gets closest positioned (position != static) ancestor. ...

Gets closest positioned (position != static) ancestor.

Returns

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

Gets the node that preceeds 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
Gets the private _ object which is bound to the native DOM object using getCustomData. ...

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

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.

Gets CSS style value. ...

Gets CSS style value.

Parameters

  • name : String

    The CSS property name.

Returns

  • String

    Style value.

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.

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.

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.

Gets the window object that contains this element. ...

Gets the window object that contains this element.

Returns

...

Parameters

  • name : Object
  • includeSelf : Object
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.

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.

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
Checks if the node is succeeded by any sibling. ...

Checks if the node is succeeded by any sibling.

Returns

  • Boolean
Checks if the node is preceded by any sibling. ...

Checks if the node is preceded by any sibling.

Returns

  • Boolean
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 a node before this node. ...

Inserts a 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.editable
view source
( element, [range] )
Low-level method for inserting an element into the editable. ...

Low-level method for inserting an element into the editable. See the CKEDITOR.editor.insertElement method which is the editor-level API for this purpose.

This method will insert the element into the current selection or a given range. It also creates an undo snapshot, scrolls the viewport to the insertion and selects the range next to the inserted content. If you want to insert an element without additional operations use insertElementIntoRange.

Parameters

CKEDITOR.editable
view source
( element, range ) : Boolean
Inserts an element into the position in the editor determined by the range. ...

Inserts an element into the position in the editor determined by the range.

Note: This method does not save undo snapshots nor selects the inserted element. If you want to do it, use the insertElement method.

Parameters

Returns

  • Boolean

    Informs whether the insertion was successful.

CKEDITOR.editable
view source
( element )deprecated
Alias for insertElement. ...

Alias for insertElement.

This method has been deprected

Parameters

CKEDITOR.editable
view source
( data, [mode], [range] )
Low-level method for inserting HTML into the editable. ...

Low-level method for inserting HTML into the editable. See the CKEDITOR.editor.insertHtml method which is the editor-level API for this purpose.

This method will insert HTML into the current selection or a given range. It also creates an undo snapshot, scrolls the viewport to the insertion and selects the range next to the inserted content. If you want to insert HTML without additional operations use insertHtmlIntoRange.

Fires the CKEDITOR.editor.afterInsertHtml event.

Parameters

  • data : String

    The HTML to be inserted.

  • mode : String (optional)

    See CKEDITOR.editor.insertHtml's param.

    Defaults to: 'html'

  • range : CKEDITOR.dom.range (optional)

    If specified, the HTML will be inserted into the range instead of into the selection. The selection will be placed at the end of the insertion (like in the normal case). Introduced in CKEditor 4.5.

CKEDITOR.editable
view source
( data, range, [mode] )
Inserts HTML into the position in the editor determined by the range. ...

Inserts HTML into the position in the editor determined by the range.

Note: This method does not save undo snapshots nor selects inserted HTML. If you want to do it, use insertHtml.

Fires the CKEDITOR.editor.afterInsertHtml event.

Available since: 4.5

Parameters

  • data : String

    HTML code to be inserted into the editor.

  • range : CKEDITOR.dom.range

    The range as a place of insertion.

  • mode : String (optional)

    Mode in which HTML will be inserted. See CKEDITOR.editor.insertHtml.

    Defaults to: 'html'

CKEDITOR.editable
view source
( text )
Low-level method for inserting text into the editable. ...

Low-level method for inserting text into the editable. See the CKEDITOR.editor.insertText method which is the editor-level API for this purpose.

Parameters

  • text : String
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.

( [customNodeNames] ) : Boolean
Checks whether an element is displayed as a block. ...

Checks whether an element is displayed as a block.

Parameters

  • customNodeNames : Object (optional)

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

Returns

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

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
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
CKEDITOR.editable
view source
( ) : Boolean
Checks if the editable is one of the host page elements, indicates an inline editing environment. ...

Checks if the editable is one of the host page elements, indicates an inline editing environment.

Returns

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

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

// For the following HTML:
// <b>foo</b><div contenteditable="false"><i>bar</i></div>

elB.isReadOnly(); // -> false
foo.isReadOnly(); // -> false
elDiv.isReadOnly(); // -> true
elI.isReadOnly(); // -> true

This method works in two modes depending on browser support for the element.isContentEditable property and the value of the checkOnlyAttributes parameter. The element.isContentEditable check is faster, but it is known to malfunction in hidden or detached nodes. Additionally, when processing some detached DOM tree you may want to imitate that this happens inside an editable container (like it would happen inside the CKEDITOR.editable). To do so, you can temporarily attach this tree to an element with the data-cke-editable attribute and use the checkOnlyAttributes mode.

Available since: 3.5

Parameters

  • checkOnlyAttributes : Boolean (optional)

    If true, only attributes will be checked, native methods will not be used. This parameter needs to be true to check hidden or detached elements. Introduced in 4.5.

    Defaults to: false

Returns

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

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

CKEDITOR.editable
view source
( name, fn )
Overrides CKEDITOR.dom.element.on to have special focus/blur handling. ...

Overrides CKEDITOR.dom.element.on to have special focus/blur handling. The focusin/focusout events are used in IE to replace regular focus/blur events because we want to avoid the asynchronous nature of later ones.

Parameters

  • name : Object
  • fn : Object

Overrides: CKEDITOR.event.on

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

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.

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.

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 the data slot under the given key. ...

Removes the value in the data slot under the 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.

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.

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.editable
view source
( )
Restore all attribution changes made by {@link changeAttr }. ...

Restore all attribution changes made by {@link changeAttr }.

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

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

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

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 guaranteed to be available on this unique DOM node, thus any wish to continue access to 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.editable
view source
( data, isSnapshot )
CKEDITOR.editor.setData ...

CKEDITOR.editor.setData

Parameters

  • data : Object
  • isSnapshot : Object
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.

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.editable
view source
( isReadOnly )
Changes the read-only state of this editable. ...

Changes the read-only state of this editable.

Parameters

  • isReadOnly : Boolean
( 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.

( 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

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

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

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.

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.editable
view source
( )private
Editable element bootstrapping. ...

Editable element bootstrapping.

Shows this element (displays it). ...

Shows this element (displays it).

var element = CKEDITOR.document.getById( 'myElement' );
element.show();
CKEDITOR.editable
view source
( text ) : String
Transforms plain text to HTML based on current selection and CKEDITOR.editor.activeEnterMode. ...

Transforms plain text to HTML based on current selection and CKEDITOR.editor.activeEnterMode.

Available since: 4.5

Parameters

  • text : String

    Text to transform.

Returns

  • String

    HTML generated from the text.

Makes the element and its children unselectable. ...

Makes the element and its children unselectable.

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