CKEditor 4 Documentation

CKEDITOR.ui

Mixins

Files

Contains UI features related to an editor instance.

Defined By

Properties

CKEDITOR.ui
view source
: Objectprivate
Object used to store private stuff. ...

Object used to store private stuff.

Defaults to: {handlers: {}}

Defined By

Methods

CKEDITOR.ui
view source
new( editor ) : CKEDITOR.ui
Creates a ui class instance. ...

Creates a ui class instance.

Parameters

Returns

Overrides: CKEDITOR.event.constructor

CKEDITOR.ui
view source
( name, type, definition )
Adds a UI item to the items collection. ...

Adds a UI item to the items collection. These items can be later used in the interface.

// Add a new button named 'MyBold'.
editorInstance.ui.add( 'MyBold', CKEDITOR.UI_BUTTON, {
    label: 'My Bold',
    command: 'bold'
} );

Parameters

  • name : String

    The UI item name.

  • type : Object

    The item type.

  • definition : Object

    The item definition. The properties of this object depend on the item type.

CKEDITOR.ui
view source
( name, definition )
Adds a button definition to the UI elements list. ...

Adds a button definition to the UI elements list.

editorInstance.ui.addButton( 'MyBold', {
    label: 'My Bold',
    command: 'bold',
    toolbar: 'basicstyles,1'
} );

Parameters

  • name : String

    The button name.

  • definition : Object

    The button definition.

    • label : String

      The textual part of the button (if visible) and its tooltip.

    • command : String

      The command to be executed once the button is activated.

    • toolbar : String

      The toolbar group into which the button will be added. An optional index value (separated by a comma) determines the button position within the group.

CKEDITOR.ui
view source
( type, handler )
Adds a handler for a UI item type. ...

Adds a handler for a UI item type. The handler is responsible for transforming UI item definitions into UI objects.

Parameters

  • type : Object

    The item type.

  • handler : Object

    The handler definition.

CKEDITOR.ui
view source
( name, definition )
...

Parameters

  • name : String
  • definition : Object
CKEDITOR.ui
view source
( name, previous, [subgroupOf] )
Adds a toolbar group. ...

Adds a toolbar group. See CKEDITOR.config.toolbarGroups for more details.

Note: This method will not modify toolbar groups set explicitly by CKEDITOR.config.toolbarGroups. It will only extend the default setting.

Parameters

  • name : String

    Toolbar group name.

  • previous : Number/String

    The name of the toolbar group after which this one should be added or 0 if this group should be the first one.

  • subgroupOf : String (optional)

    The name of the parent group.

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

Register event handler under the capturing stage on supported target.

CKEDITOR.ui
view source
( name ) : Object
Gets a UI object. ...

Gets a UI object.

Parameters

  • name : String

    The UI item name.

Returns

  • Object

    The UI element.

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

( 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.ui
view source
( name )
Retrieves the created UI objects by name. ...

Retrieves the created UI objects by name.

Parameters

  • name : String

    The name of the UI definition.

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
( eventName, listenerFunction, [scopeObj], [listenerData], [priority] ) : Object
Registers a listener to a specific event in the current object. ...

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

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

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

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

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

Parameters

  • eventName : String

    The event name to which listen.

  • listenerFunction : Function

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

  • scopeObj : Object (optional)

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

  • listenerData : Object (optional)

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

  • priority : Number (optional)

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

    Defaults to: 10

Returns

  • Object

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

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

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

CKEDITOR.event.on

Remove all existing listeners on this object, for cleanup purpose. ...

Remove all existing listeners on this object, for cleanup purpose.

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

Returns the unique DOM element that represents one editor's UI part, also known as "space". ...

Returns the unique DOM element that represents one editor's UI part, also known as "space". There are 3 main editor spaces available: top, contents and bottom and their availability depends on editor type.

// Hide the bottom space in the UI.
var bottom = editor.ui.space( 'bottom' );
bottom.setStyle( 'display', 'none' );

Parameters

  • name : String

    The name of the space.

Returns

CKEDITOR.ui
view source
( name ) : String
Returns the HTML ID for a specific UI space name. ...

Returns the HTML ID for a specific UI space name.

Parameters

  • name : String

    The name of the space.

Returns

  • String

    The ID of an element representing this space in the DOM.

Defined By

Events

CKEDITOR.ui
view source
( evt )
Internal event fired when a new UI element is ready. ...

Internal event fired when a new UI element is ready.

Parameters