Report an issue
Class

CKEDITOR.editable

class

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

Filtering

Properties

  • $ : Object

    readonly

    The native DOM object represented by this class instance.

    var element = new CKEDITOR.dom.element( 'span' );
    alert( element.$.nodeType ); // '1'
    
  • hasFocus : Boolean

    Indicates whether the editable element gained focus.

    Defaults to false

  • status : String

    since 4.3.3 readonly

    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'

  • type : Number

    readonly

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

    Defaults to CKEDITOR.NODE_ELEMENT

Static properties

  • useCapture : Boolean

    mixed static

Methods

  • constructor( editor, element ) → editable

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

    Parameters

    editor : editor

    The editor instance on which the editable operates.

    element : HTMLElement | 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

    editable
  • addClass( className ) → element

    chainable

    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

    element

    this

  • append( node, [ toStart ] ) → node

    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 : node | String

    The node or element name to be appended.

    [ toStart ] : Boolean

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

    Defaults to false

    Returns

    node

    The appended node.

  • appendBogus( [ force ] )

    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

    Append filler regardless of the environment.

  • appendHtml( html )

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

    Parameters

    html : String
  • appendText( text )

    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.

  • appendTo( element ) → 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

    element : element

    The target element to which this node will be appended.

    Returns

    element

    The target element.

  • attachClass( className )

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

    Parameters

    className : String

    The class name to be added. CKEDITOR.dom.element.addClass

  • attachListener( obj, eventName, listenerFunction, [ scopeObj ], [ listenerData ], [ priority ] ) → Object

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

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

    [ listenerData ] : Object

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

    [ priority ] : Number

    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.

  • breakParent( parent, [ cloneId ] )

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

    The anscestor element to get broken.

    [ cloneId ] : Boolean

    Whether to preserve ancestor ID attributes while breaking.

    Defaults to false

  • capture()

    Register event handler under the capturing stage on supported target.

  • changeAttr( attr, val )

    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.

  • clearCustomData()

    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.

  • clearListeners()

    Remove all event listeners registered from attachListener.

  • clone( [ includeChildren ], [ cloneId ] ) → node

    Clones this node.

    Note: Values set by {setCustomData} will not be available in the clone.

    Parameters

    [ includeChildren ] : Boolean

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

    Defaults to false

    [ cloneId ] : Boolean

    Whether ID attributes should be cloned, too.

    Defaults to false

    Returns

    node

    Clone of this node.

  • contains( node ) → Boolean

    Checks if this element contains given node.

    Parameters

    node : node

    Returns

    Boolean
  • copyAttributes( dest, skipAttributes )

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

    The destination element.

    skipAttributes : Object

    A dictionary of attributes to skip.

  • data( name, [ value ] )

    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

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

  • define( name, meta )

    Predefine some intrinsic properties on a specific event name.

    Parameters

    name : String

    The event name

    meta : Object
    Properties
    [ errorProof ]

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

    Defaults to false

  • detach()

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

  • disableContextMenu()

    Disables browser's context menu in this element.

  • equals( object ) → Boolean

    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.

  • extractHtmlFromRange( range, [ removeEmptyBlock ] ) → documentFragment

    since 4.5

    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.

    Parameters

    range : range
    [ removeEmptyBlock ] : Boolean

    See CKEDITOR.editor.extractSelectedHtml's parameter. Note that the range will not be modified if this parameter is set to true.

    Defaults to false

    Returns

    documentFragment

    The extracted fragment of the editable content.

  • find( selector ) → nodeList

    since 4.3

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

    Parameters

    selector : String

    A valid CSS selector.

    Returns

    nodeList
  • findOne( selector ) → element

    since 4.3

    Returns the first element within this element that matches the specified selector.

    Notes:

    • Not available in IE7.
    • Unlike the native querySelector 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>
      

    Parameters

    selector : String

    A valid CSS selector.

    Returns

    element
  • fire( eventName, [ data ], [ editor ] ) → Boolean | 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

    eventName : String

    The event name to fire.

    [ data ] : Object

    Data to be sent as the CKEDITOR.eventInfo.data when calling the listeners.

    [ editor ] : editor

    The editor instance to send as the CKEDITOR.eventInfo.editor when calling the listener.

    Returns

    Boolean | Object

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

  • fireOnce( eventName, [ data ], [ editor ] ) → Boolean | Object

    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

    eventName : String

    The event name to fire.

    [ data ] : Object

    Data to be sent as the CKEDITOR.eventInfo.data when calling the listeners.

    [ editor ] : editor

    The editor instance to send as the CKEDITOR.eventInfo.editor when calling the listener.

    Returns

    Boolean | Object

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

  • focus( defer )

    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.

  • focusNext( [ ignoreChildren ], [ indexToUse ] )

    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

    Defaults to false

    [ indexToUse ] : Number
  • focusPrevious( [ ignoreChildren ], [ indexToUse ] )

    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

    Defaults to false

    [ indexToUse ] : Number
  • forEach( callback, [ type ], [ skipRoot ] )

    since 4.3

    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.
    

    Parameters

    callback : Function

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

    Properties
    node : node

    Node passed as argument.

    [ type ] : Number

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

    [ skipRoot ] : Boolean

    Don't execute callback on this element.

  • getAddress( [ normalized ] ) → Array

    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

    See getIndex.

    Defaults to false

    Returns

    Array

    The address.

  • getAscendant( query, [ includeSelf ] ) → node

    since 3.6.1

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

    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

    Whether to include the current node in the search.

    Returns

    node

    The located ancestor node or null if not found.

  • getAttribute( name ) → String

    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.

  • getAttributes( exclude ) → Object

    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.

  • getBogus() → node | Boolean

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

    Returns

    node | Boolean

    Bogus node or false.

  • getChild( indices ) → 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

    node

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

  • getChildCount() → Number

    Gets number of element's children.

    Returns

    Number
  • getChildren() → nodeList

    Gets the nodes list containing all children of this element.

    Returns

    nodeList
  • getClientRect( [ isAbsolute ] ) → rect

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

    Since 4.10.0 you can pass an additional parameter if the function should return an absolute element position that can be used for positioning elements inside scrollable areas.

    For example, you can use this function with the editor's window frame to calculate the absolute rectangle of the visible area of the editor viewport. The retrieved absolute rectangle can be used to position elements like toolbars or notifications (elements outside the editor) to always keep them inside the editor viewport independently from the scroll position.

    var frame = editor.window.getFrame();
    frame.getClientRect( true );
    

    Parameters

    [ isAbsolute ] : Boolean

    The function will retrieve an absolute rectangle of the element, i.e. the position relative to the upper-left corner of the topmost viewport. This option is available since 4.10.0.

    Defaults to false

    Returns

    rect

    The dimensions of the DOM element.

  • getCommonAncestor( node )

    Parameters

    node : Object
  • getComputedStyle( propertyName ) → String

    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.

  • getCustomData( key ) → 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.

  • getData( isSnapshot )

    CKEDITOR.editor.getData

    Parameters

    isSnapshot : Object
  • getDirection( useComputed )

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

    Parameters

    useComputed : Object
  • getDocument() → document

    Gets the document containing this element.

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

    Returns

    document

    The document.

  • getDocumentPosition( [ refDocument ] ) → Object

    Gets this element's position in document.

    Parameters

    [ refDocument ] : document

    Returns

    Object

    Element's position.

    Properties
    x : Number
    y : Number

    refDocument

  • getDtd() → Object

    Gets the DTD entries for this element.

    Returns

    Object

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

  • getEditor( [ optimized ] ) → editor

    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

    If set to false it will scan every editor editable.

    Defaults to true

    Returns

    editor

    An editor instance or null if nothing has been found.

  • getElementsByTag( tagName )

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

    Parameters

    tagName : String
  • getFirst( evaluator ) → node

    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

    node

    The first child node or null if not available.

  • getFrameDocument() → document

    Returns the inner document of this <iframe> element.

    Returns

    document

    The inner document.

  • getHtml() → String

    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.

  • getHtmlFromRange( range ) → documentFragment

    since 4.5

    The base of the CKEDITOR.editor.getSelectedHtml method.

    Parameters

    range : range

    Returns

    documentFragment
  • getId() → String

    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.

  • getIndex( normalized ) → Number

    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.

  • getLast( evaluator ) → node

    See getFirst.

    Parameters

    evaluator : Function

    Filtering the result node.

    Returns

    node
  • getName() → String

    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.

  • getNameAtt() → String

    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.

  • getNext( [ evaluator ] ) → node

    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

    Filtering the result node.

    Returns

    node

    The next node or null if not available.

  • getNextSourceNode( startFromSibling, nodeType, guard )

    Parameters

    startFromSibling : Object
    nodeType : Object
    guard : Object
  • getOuterHtml() → String

    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.

  • getParent( [ allowFragmentParent ] ) → element

    Gets the parent element for this node.

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

    Parameters

    [ allowFragmentParent ] : Boolean

    Consider also parent node that is of fragment type CKEDITOR.NODE_DOCUMENT_FRAGMENT.

    Defaults to false

    Returns

    element

    The parent element.

  • getParents( [ closerFirst ] ) → Array

    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

    Determines the order of returned nodes.

    Defaults to false

    Returns

    Array

    Returns an array of CKEDITOR.dom.node.

  • getPosition( otherNode ) → Number

    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

    otherNode : node

    A node to check relation with.

    Returns

    Number

    Position relation between this node and given node.

  • getPositionedAncestor() → element

    Gets closest positioned (position != static) ancestor.

    Returns

    element

    Positioned ancestor or null.

  • getPrevious( [ evaluator ] ) → node

    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

    Filtering the result node.

    Returns

    node

    The previous node or null if not available.

  • getPreviousSourceNode( startFromSibling, nodeType, guard )

    Parameters

    startFromSibling : Object
    nodeType : Object
    guard : Object
  • getPrivate() → Object

    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.

  • getSize( type, isBorderBox )

    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.

  • getStyle( name ) → String

    Gets CSS style value.

    Parameters

    name : String

    The CSS property name.

    Returns

    String

    Style value.

  • getTabIndex() → Number

    Gets the computed tabindex for this element.

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

    Returns

    Number

    The tabindex value.

  • getText() → String

    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.

  • getUniqueId() → Number

    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.

  • getValue() → String

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

    Returns

    String

    The element value.

  • getWindow() → window

    Gets the window object that contains this element.

    Returns

    window

    The window object.

  • hasAscendant( name, includeSelf )

    Parameters

    name : Object
    includeSelf : Object
  • hasAttribute( name ) → Boolean

    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.

  • hasAttributes() → Boolean

    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.

  • hasClass( className ) → Boolean

    Checks if element has class name.

    Parameters

    className : String

    Returns

    Boolean
  • hasListeners( eventName ) → Boolean

    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
  • hasNext() → Boolean

    Checks if the node is succeeded by any sibling.

    Returns

    Boolean
  • hasPrevious() → Boolean

    Checks if the node is preceded by any sibling.

    Returns

    Boolean
  • hide()

    Hides this element (sets display: none).

    var element = CKEDITOR.document.getById( 'myElement' );
    element.hide();
    
  • insertAfter( node ) → 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

    node : node

    The node that will precede this element.

    Returns

    node

    The node preceding this one after insertion.

  • insertBefore( node ) → 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

    node : node

    The node that will succeed this element.

    Returns

    node

    The node being inserted.

  • insertBeforeMe( node ) → 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

    node : node

    The node that will preceed this element.

    Returns

    node

    The node being inserted.

  • insertElement( element, [ range ] )

    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

    element : element

    The element to insert.

    [ range ] : range

    If specified, the element will be inserted into the range instead of into the selection.

  • insertElementIntoRange( element, range ) → Boolean

    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

    element : element

    The element to be inserted.

    range : range

    The range as a place of insertion.

    Returns

    Boolean

    Informs whether the insertion was successful.

  • insertElementIntoSelection( element )

    deprecated

    Alias for insertElement.

    Parameters

    element : element

    The element to be inserted.

  • insertHtml( data, [ mode ], [ range ] )

    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

    See CKEDITOR.editor.insertHtml's param.

    Defaults to 'html'

    [ range ] : range

    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.

  • insertHtmlIntoRange( data, range, [ mode ] )

    since 4.5

    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.

    Parameters

    data : String

    HTML code to be inserted into the editor.

    range : range

    The range as a place of insertion.

    [ mode ] : String

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

    Defaults to 'html'

  • insertText( text )

    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
  • is( name ) → Boolean

    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.

  • isBlockBoundary( [ customNodeNames ] ) → Boolean

    Checks whether an element is displayed as a block.

    Parameters

    [ customNodeNames ] : Object

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

    Returns

    Boolean
  • isEditable( [ textCursor ] )

    Decide whether one element is able to receive cursor.

    Parameters

    [ textCursor ] : Boolean

    Only consider element that could receive text child.

    Defaults to true

  • isEmptyInlineRemoveable() → Boolean

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

    Returns

    Boolean
  • isIdentical( otherElement ) → Boolean

    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

    otherElement : element

    Element to compare.

    Returns

    Boolean
  • isInline() → Boolean

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

    Returns

    Boolean
  • isReadOnly( [ checkOnlyAttributes ] ) → Boolean

    since 3.5

    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.

    Parameters

    [ checkOnlyAttributes ] : Boolean

    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
  • isVisible() → Boolean

    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.

  • ltrim()

  • mergeSiblings( [ inlineOnly ] )

    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

    Allow only inline elements to be merged.

    Defaults to true

  • move( target, toStart )

    Parameters

    target : Object
    toStart : Object
  • moveChildren( target, [ toStart ] )

    Moves this element's children to the target element.

    Parameters

    target : element
    [ toStart ] : Boolean

    Insert moved children at the beginning of the target element.

    Defaults to false

  • on( name, fn )

    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
  • once()

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

  • remove( [ preserveChildren ] ) → node

    chainable

    Removes this node from the document DOM.

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

    Parameters

    [ preserveChildren ] : Boolean

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

    Defaults to false

    Returns

    node

    this

  • removeAllListeners()

    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.

  • removeAttribute( name )

    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.

  • removeAttributes( [ attributes ] )

    Removes all element's attributes or just given ones.

    Parameters

    [ attributes ] : Array

    The array with attributes names.

  • removeClass( className ) → element

    chainable

    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

    element

    this

  • removeCustomData( key ) → Object

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

    Parameters

    key : String

    Returns

    Object

    Removed value or null if not found.

  • removeListener( eventName, listenerFunction )

    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.

  • removeStyle( name )

    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.

  • renameNode( newTag )

    Changes the tag name of the current element.

    Parameters

    newTag : String

    The new tag for the element.

  • replace( nodeToReplace )

    Parameters

    nodeToReplace : Object
  • restoreAttrs()

    Restore all attribution changes made by changeAttr.

  • rtrim()

  • scrollIntoParent( parent, [ alignToTop ], [ hscroll ] )

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

    Parameters

    parent : element | window

    The container to scroll into.

    [ alignToTop ] : Boolean

    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

    Whether horizontal overflow should be considered.

  • scrollIntoView( [ alignToTop ] )

    Make any page element visible inside the browser viewport.

    Parameters

    [ alignToTop ] : Boolean

    Defaults to false

  • setAttribute( name, value ) → element

    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

    element

    This element instance.

  • setAttributes( attributesPairs ) → element

    chainable

    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

    element

    This element instance.

  • setCustomData( key, value ) → domObject

    chainable

    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

    domObject

    This DOM object instance.

  • setData( data, isSnapshot )

    CKEDITOR.editor.setData

    Parameters

    data : Object
    isSnapshot : Object
  • setHtml( html ) → String

    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.

  • setOpacity( opacity )

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

  • setReadOnly( isReadOnly )

    Changes the read-only state of this editable.

    Parameters

    isReadOnly : Boolean
  • setSize( type, size, isBorderBox )

    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.

  • setState( state, [ base ], [ useAria ] )

    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

    state : Number

    Indicate the element state. One of CKEDITOR.TRISTATE_ON, CKEDITOR.TRISTATE_OFF, CKEDITOR.TRISTATE_DISABLED.

    [ base ] : Object

    The prefix apply to each of the state class name.

    Defaults to 'cke'

    [ useAria ] : Object

    Whether toggle the ARIA state attributes besides of class name change.

    Defaults to true

  • setStyle( name, value ) → element

    chainable

    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

    element

    This element instance.

  • setStyles( stylesPairs ) → element

    chainable

    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

    element

    This element instance.

  • setText( text ) → String

    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.

  • setValue( value ) → element

    chainable

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

    Parameters

    value : String

    The element value.

    Returns

    element

    This element instance.

  • show()

    Shows this element (displays it).

    var element = CKEDITOR.document.getById( 'myElement' );
    element.show();
    
  • transformPlainTextToHtml( text ) → String

    since 4.5

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

    Parameters

    text : String

    Text to transform.

    Returns

    String

    HTML generated from the text.

  • trim()

  • unselectable()

    Makes the element and its children unselectable.

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

    since 4.4.6 private

    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
  • setup()

    private

    Editable element bootstrapping.