CKEditor 4 Documentation

CKEDITOR.editor

Mixins

Files

Represents an editor instance. This constructor should be rarely used in favor of the CKEDITOR editor creation functions.

Defined By

Properties

CKEDITOR.editor
view source
: Numberreadonly
The dynamic enter mode which should be used in the current context (selection location). ...

The dynamic enter mode which should be used in the current context (selection location). By default it equals the enterMode and it can be changed by the setActiveEnterMode method.

See also the setActiveEnterMode method for an explanation of dynamic settings.

Available since: 4.3

CKEDITOR.editor
view source
: CKEDITOR.filterreadonly
The active filter instance which should be used in the current context (location selection). ...

The active filter instance which should be used in the current context (location selection). This instance will be used to make a decision which commands, buttons and other features can be enabled.

By default it equals the filter and it can be changed by the setActiveFilter method.

editor.on( 'activeFilterChange', function() {
    if ( editor.activeFilter.check( 'cite' ) )
        // Do something when <cite> was enabled - e.g. enable a button.
    else
        // Otherwise do something else.
} );

See also the setActiveEnterMode method for an explanation of dynamic settings.

Available since: 4.3

CKEDITOR.editor
view source
: Numberreadonly

See the activeEnterMode property.

See the activeEnterMode property.

Available since: 4.3

CKEDITOR.editor
view source
: Booleanreadonly
Indicates that the editor is running in an environment where no block elements are accepted inside the content. ...

Indicates that the editor is running in an environment where no block elements are accepted inside the content.

This can be for example inline editor based on <h1> element.

CKEDITOR.editor
view source
: CKEDITOR.configreadonly
The configurations for this editor instance. ...

The configurations for this editor instance. It inherits all settings defined in CKEDITOR.config, combined with settings loaded from custom configuration files and those defined inline in the page when creating the editor.

var editor = CKEDITOR.instances.editor1;
alert( editor.config.skin ); // e.g. 'moono'
The outermost element in the DOM tree in which the editable element resides. ...

The outermost element in the DOM tree in which the editable element resides. It is provided by a specific editor creator after editor UI is created and is not intended to be modified.

var editor = CKEDITOR.instances.editor1;
alert( editor.container.getName() ); // 'span'
If defined, points to the data processor which is responsible to translate and transform the editor data on input and...

If defined, points to the data processor which is responsible to translate and transform the editor data on input and output. Generaly it will point to an instance of CKEDITOR.htmlDataProcessor, which handles HTML data. The editor may also handle other data formats by using different data processors provided by specific plugins.

The document that stores the editor contents. ...

The document that stores the editor contents.

  • For the classic (iframe-based) editor it is equal to the document inside the iframe containing the editable element.
  • For the inline editor it is equal to CKEDITOR.document.

The document object is available after the contentDom event is fired and may be invalidated when the contentDomUnload event is fired (classic editor only).

editor.on( 'contentDom', function() {
    console.log( editor.document );
} );
CKEDITOR.editor
view source
: CKEDITOR.dom.elementreadonly
The original host page element upon which the editor is created, it's only supposed to be provided by the concrete ed...

The original host page element upon which the editor is created, it's only supposed to be provided by the concrete editor creator and is not subjected to be modified.

CKEDITOR.editor
view source
: Numberreadonly
This property indicate the way how this instance is associated with the element.CKEDITOR.ELEMENT_MODE_INLINE CKEDITOR...

This property indicate the way how this instance is associated with the element.CKEDITOR.ELEMENT_MODE_INLINE CKEDITOR.ELEMENT_MODE_REPLACE

CKEDITOR.editor
view source
: Numberreadonly
The main (static) enter mode which is a validated version of the CKEDITOR.config.enterMode setting. ...

The main (static) enter mode which is a validated version of the CKEDITOR.config.enterMode setting. Currently only one rule exists – blockless editors may have enter modes set only to CKEDITOR.ENTER_BR.

Available since: 4.3

CKEDITOR.editor
view source
: CKEDITOR.filterreadonly
The main filter instance used for input data filtering, data transformations, and activation of features. ...

The main filter instance used for input data filtering, data transformations, and activation of features.

It points to a CKEDITOR.filter instance set up based on editor configuration.

Available since: 4.1

Controls the focus state of this editor instance. ...

Controls the focus state of this editor instance. This property is rarely used for normal API operations. It is mainly destinated to developer adding UI elements to the editor interface.

CKEDITOR.editor
view source
: Stringreadonly

A unique random string assigned to each editor instance in the page.

A unique random string assigned to each editor instance in the page.

Controls keystrokes typing in this editor instance.

Controls keystrokes typing in this editor instance.

CKEDITOR.editor
view source
: Objectreadonly
An object that contains all language strings used by the editor interface. ...

An object that contains all language strings used by the editor interface.

alert( editor.lang.basicstyles.bold ); // e.g. 'Negrito' (if the language is set to Portuguese)
CKEDITOR.editor
view source
: Stringreadonly
The code for the language resources that have been loaded for the user interface elements of this editor instance. ...

The code for the language resources that have been loaded for the user interface elements of this editor instance.

alert( editor.langCode ); // e.g. 'en'
CKEDITOR.editor
view source
: Stringreadonly
The current editing mode. ...

The current editing mode. An editing mode basically provides different ways of editing or viewing the contents.

alert( CKEDITOR.instances.editor1.mode ); // (e.g.) 'wysiwyg'
CKEDITOR.editor
view source
: Stringreadonly
A unique identifier of this editor instance. ...

A unique identifier of this editor instance.

Note: It will be originated from the ID or name attribute of the element, otherwise a name pattern of 'editor{n}' will be used.

CKEDITOR.editor
view source
: Objectreadonly
An object that contains references to all plugins used by this editor instance. ...

An object that contains references to all plugins used by this editor instance.

alert( editor.plugins.dialog.path ); // e.g. 'http://example.com/ckeditor/plugins/dialog/'

// Check if a plugin is available.
if ( editor.plugins.image ) {
    ...
}
CKEDITOR.editor
view source
: Booleanreadonly
Indicates the read-only state of this editor. ...

Indicates the read-only state of this editor. This is a read-only property.CKEDITOR.editor#setReadOnly

Available since: 3.6

CKEDITOR.editor
view source
: Numberreadonly

See the enterMode property.

See the enterMode property.

Available since: 4.3

CKEDITOR.editor
view source
: Stringreadonly
Indicates editor initialization status. ...

Indicates editor initialization status. The following statuses are available:

  • unloaded: the initial state - editor's instance has been initialized, but its components (config, plugins, language files) are not loaded yet.
  • loaded: editor's components have been loaded - see loaded event.
  • ready: editor is fully initialized and ready - see instanceReady event.
  • destroyed: the editor has been destroyed - see destroy method.

Defaults to: 'unloaded'

Available since: 4.1

CKEDITOR.editor
view source
: Numberreadonly
The tabbing navigation order determined for this editor instance. ...

The tabbing navigation order determined for this editor instance. This can be set by the CKEDITOR.config.tabIndex setting or taken from the tabindex attribute of the element associated with the editor.

alert( editor.tabIndex ); // e.g. 0

Defaults to: 0

CKEDITOR.editor
view source
: Objectreadonly
Contains all UI templates created for this editor instance. ...

Contains all UI templates created for this editor instance.

Defaults to: {}

CKEDITOR.editor
view source
: String/Booleanreadonly
Indicates the human-readable title of this editor. ...

Indicates the human-readable title of this editor. Although this is a read-only property, it can be initialized with CKEDITOR.config.title.

Note: Please do not confuse this property with editor.name which identifies the instance in the CKEDITOR.instances literal.

Available since: 4.2

CKEDITOR.editor
view source
: Objectreadonly
The toolbar definition used by the editor. ...

The toolbar definition used by the editor. It is created from the CKEDITOR.config.toolbar option if it is set or automatically based on CKEDITOR.config.toolbarGroups.

CKEDITOR.editor
view source
: CKEDITOR.uireadonly

Namespace containing UI features related to this editor instance.

Namespace containing UI features related to this editor instance.

An instance of widget repository. ...

An instance of widget repository. It contains all registered widget definitions and initialized instances.

editor.widgets.add( 'someName', {
    // Widget definition...
} );

editor.widgets.registered.someName; // -> Widget definition

Available since: 4.3

CKEDITOR.editor
view source
: CKEDITOR.dom.windowreadonly
The window instance related to the document property. ...

The window instance related to the document property.

It is always equal to the editor.document.getWindow().

See document property documentation.

Defined By

Methods

CKEDITOR.editor
view source
new( [instanceConfig], [element], [mode] ) : CKEDITOR.editor
Creates an editor class instance. ...

Creates an editor class instance.

Parameters

  • instanceConfig : Object (optional)

    Configuration values for this specific instance.

  • element : CKEDITOR.dom.element (optional)

    The DOM element upon which this editor will be created.

  • mode : Number (optional)

    The element creation mode to be used by this editor.

Returns

Overrides: CKEDITOR.event.constructor

CKEDITOR.editor
view source
( )private
Attaches the editor to a form to call updateElement before form submission. ...

Attaches the editor to a form to call updateElement before form submission. This method is called by both creators (replace and inline), so there is no reason to call it manually.

CKEDITOR.editor
view source
( commandName, commandDefinition )
Adds a command definition to the editor instance. ...

Adds a command definition to the editor instance. Commands added with this function can be executed later with the execCommand method.

    editorInstance.addCommand( 'sample', {
        exec: function( editor ) {
            alert( 'Executing a command for the editor name "' + editor.name + '"!' );
        }
    } );

Parameters

CKEDITOR.editor
view source
( cssPath )
Adds the path to a stylesheet file to the exisiting CKEDITOR.config.contentsCss value. ...

Adds the path to a stylesheet file to the exisiting CKEDITOR.config.contentsCss value.

Note: This method is available only with the wysiwygarea plugin and only affects classic editors based on it (so it does not affect inline editors).

editor.addContentsCss( 'assets/contents.css' );

Available since: 4.4

Parameters

  • cssPath : String

    The path to the stylesheet file which should be added.

CKEDITOR.editor
view source
( feature ) : Boolean
Shorthand for CKEDITOR.filter.addFeature. ...

Shorthand for CKEDITOR.filter.addFeature.

Available since: 4.1

Parameters

Returns

CKEDITOR.editor
view source
( name, [order] )
Registers an item group to the editor context menu in order to make it possible to associate it with menu items later. ...

Registers an item group to the editor context menu in order to make it possible to associate it with menu items later.

Parameters

  • name : String

    Specify a group name.

  • order : Number (optional)

    Define the display sequence of this group inside the menu. A smaller value gets displayed first.

    Defaults to: 100

CKEDITOR.editor
view source
( name, definition )
Adds an item from the specified definition to the editor context menu. ...

Adds an item from the specified definition to the editor context menu.

Parameters

  • name : String

    The menu item name.

  • definition : Object

    The menu item definition.

CKEDITOR.editor
view source
( definitions )
Adds one or more items from the specified definition array to the editor context menu. ...

Adds one or more items from the specified definition array to the editor context menu.

Parameters

  • definitions : Array

    List of definitions for each menu item as if addMenuItem is called.

CKEDITOR.editor
view source
( mode, exec )
Registers an editing mode. ...

Registers an editing mode. This function is to be used mainly by plugins.

Parameters

  • mode : String

    The mode name.

  • exec : Function

    The function that performs the actual mode change.

CKEDITOR.editor
view source
( func )
Add to a collection of functions to decide whether a specific element should be considered as formatting element and ...

Add to a collection of functions to decide whether a specific element should be considered as formatting element and thus could be removed during removeFormat command.

Note: Only available with the existence of removeformat plugin.

// Don't remove empty span.
editor.addRemoveFormatFilter( function( element ) {
    return !( element.is( 'span' ) && CKEDITOR.tools.isEmpty( element.getAttributes() ) );
} );

Available since: 3.3

Parameters

  • func : Function

    The function to be called, which will be passed a {CKEDITOR.dom.element} element to test.

CKEDITOR.editor
view source
( style )
Applies the style upon the editor's current selection. ...

Applies the style upon the editor's current selection. Shorthand for CKEDITOR.style.apply.

Parameters

CKEDITOR.editor
view source
( style, callback )
Registers a function to be called whenever the selection position changes in the editing area. ...

Registers a function to be called whenever the selection position changes in the editing area. The current state is passed to the function. The possible states are CKEDITOR.TRISTATE_ON and CKEDITOR.TRISTATE_OFF.

// Create a style object for the <b> element.
var style = new CKEDITOR.style( { element: 'b' } );
var editor = CKEDITOR.instances.editor1;
editor.attachStyleStateChange( style, function( state ) {
    if ( state == CKEDITOR.TRISTATE_ON )
        alert( 'The current state for the B element is ON' );
    else
        alert( 'The current state for the B element is OFF' );
} );

Parameters

  • style : CKEDITOR.style

    The style to be watched.

  • callback : Function

    The function to be called.

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

Register event handler under the capturing stage on supported target.

CKEDITOR.editor
view source
( ) : Boolean
Checks whether the current editor contents present changes when compared to the contents loaded into the editor at st...

Checks whether the current editor contents present changes when compared to the contents loaded into the editor at startup, or to the contents available in the editor when resetDirty was called.

function beforeUnload( evt ) {
    if ( CKEDITOR.instances.editor1.checkDirty() )
        return evt.returnValue = "You will lose the changes made in the editor.";
}

if ( window.addEventListener )
    window.addEventListener( 'beforeunload', beforeUnload, false );
else
    window.attachEvent( 'onbeforeunload', beforeUnload );

Returns

  • Boolean

    true if the contents contain changes.

CKEDITOR.editor
view source
( realElement, className, realElementType, isResizable )
...

Parameters

  • realElement : Object
  • className : Object
  • realElementType : Object
  • isResizable : Object
CKEDITOR.editor
view source
( realElement, className, realElementType, isResizable )
...

Parameters

  • realElement : Object
  • className : Object
  • realElementType : Object
  • isResizable : Object
Shortcut to create a CKEDITOR.dom.range instance from the editable element. ...

Shortcut to create a CKEDITOR.dom.range instance from the editable element.

Returns

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.editor
view source
( [noUpdate] )
Destroys the editor instance, releasing all resources used by it. ...

Destroys the editor instance, releasing all resources used by it. If the editor replaced an element, the element will be recovered.

alert( CKEDITOR.instances.editor1 ); // e.g. object
CKEDITOR.instances.editor1.destroy();
alert( CKEDITOR.instances.editor1 ); // undefined

Parameters

  • noUpdate : Boolean (optional)

    If the instance is replacing a DOM element, this parameter indicates whether or not to update the element with the instance contents.

CKEDITOR.editor
view source
( elementOrEditable )
Create, retrieve or detach an editable element of the editor, this method should always be used instead of calling di...

Create, retrieve or detach an editable element of the editor, this method should always be used instead of calling directly CKEDITOR.editable.

Parameters

CKEDITOR.editor
view source
( [startNode] ) : CKEDITOR.dom.elementPath
Returns an element path for the selection in the editor. ...

Returns an element path for the selection in the editor.

Parameters

Returns

CKEDITOR.editor
view source
( commandName, [data] ) : Boolean
Executes a command associated with the editor. ...

Executes a command associated with the editor.

editorInstance.execCommand( 'bold' );

Parameters

  • commandName : String

    The indentifier name of the command.

  • data : Object (optional)

    Data to be passed to the command.

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.editor
view source
( )
Moves the selection focus to the editing area space in the editor. ...

Moves the selection focus to the editing area space in the editor.

CKEDITOR.editor
view source
( options, callback )
Gets clipboard data by directly accessing the clipboard (IE only) or opening paste dialog. ...

Gets clipboard data by directly accessing the clipboard (IE only) or opening paste dialog.

editor.getClipboardData( { title: 'Get my data' }, function( data ) {
    if ( data )
        alert( data.type + ' ' + data.dataValue );
} );

Parameters

  • options : Object
    • title : String (optional)

      Title of paste dialog.

  • callback : Function

    Function that will be executed with data.type and data.dataValue or null if none of the capturing method succeeded.

CKEDITOR.editor
view source
( callback, [scope] )
Open up color dialog and to receive the selected color. ...

Open up color dialog and to receive the selected color.

Parameters

  • callback : Function

    The callback when color dialog is closed

    Parameters

    • color : String

      The color value received if selected on the dialog.

  • scope : Object (optional)

    The scope in which the callback will be bound.

CKEDITOR.editor
view source
( commandName ) : CKEDITOR.command
Gets one of the registered commands. ...

Gets one of the registered commands. Note that after registering a command definition with addCommand, it is transformed internally into an instance of CKEDITOR.command, which will then be returned by this function.

Parameters

  • commandName : String

    The name of the command to be returned. This is the same name that is used to register the command with addCommand.

Returns

CKEDITOR.editor
view source
( noEvents ) : String
Gets the editor data. ...

Gets the editor data. The data will be in raw format. It is the same data that is posted by the editor.

if ( CKEDITOR.instances.editor1.getData() == '' )
    alert( 'There is no data available' );

Parameters

  • noEvents : Object

Returns

  • String

    The editor data.

CKEDITOR.editor
view source
( name ) : Object
Retrieves a particular menu item definition from the editor context menu. ...

Retrieves a particular menu item definition from the editor context menu.

Parameters

  • name : String

    The name of the desired menu item.

Returns

  • Object
CKEDITOR.editor
view source
( forContents ) : CKEDITOR.dom.element
Gets the element that can be used to check the editor size. ...

Gets the element that can be used to check the editor size. This method is mainly used by the resize plugin, which adds a UI handle that can be used to resize the editor.

Parameters

  • forContents : Boolean

    Whether to return the "contents" part of the theme instead of the container.

Returns

CKEDITOR.editor
view source
( forceRealSelection ) : CKEDITOR.dom.selection
Retrieve the editor selection in scope of editable element. ...

Retrieve the editor selection in scope of editable element.

Note: Since the native browser selection provides only one single selection at a time per document, so if editor's editable element has lost focus, this method will return a null value unless the lockSelection has been called beforehand so the saved selection is retrieved.

var selection = CKEDITOR.instances.editor1.getSelection();
alert( selection.getType() );

Parameters

  • forceRealSelection : Boolean

    Return real selection, instead of saved or fake one.

Returns

CKEDITOR.editor
view source
( )
Gets the "raw data" currently available in the editor. ...

Gets the "raw data" currently available in the editor. This is a fast method which returns the data as is, without processing, so it is not recommended to use it on resulting pages. Instead it can be used combined with the loadSnapshot method in order to be able to automatically save the editor data from time to time while the user is using the editor, to avoid data loss, without risking performance issues.

alert( editor.getSnapshot() );

CKEDITOR.editor.getData

CKEDITOR.editor
view source
( callback )
Gets the current stylesSet for this instance. ...

Gets the current stylesSet for this instance.

editor.getStylesSet( function( stylesDefinitions ) {} );

See also stylesSet event.

Parameters

  • callback : Function

    The function to be called with the styles data.

CKEDITOR.editor
view source
( ) : String
Gets the color of the editor user interface. ...

Gets the color of the editor user interface.

CKEDITOR.instances.editor1.getUiColor();

Returns

  • String

    uiColor The editor UI color or undefined if the UI color is not set.

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
CKEDITOR.editor
view source
( element )
Inserts an element into the currently selected position in the editor in WYSIWYG mode. ...

Inserts an element into the currently selected position in the editor in WYSIWYG mode.

var element = CKEDITOR.dom.element.createFromHtml( '<img src="hello.png" border="0" title="Hello" />' );
CKEDITOR.instances.editor1.insertElement( element );

Parameters

CKEDITOR.editor
view source
( html, [mode] )
Inserts HTML code into the currently selected position in the editor in WYSIWYG mode. ...

Inserts HTML code into the currently selected position in the editor in WYSIWYG mode.

  • "html" - content being inserted will completely override styles of selected position.
  • "unfiltered_html" - like "html" but content isn't filtered with CKEDITOR.filter.
  • "text" - content being inserted will inherit styles applied in selected position. This mode should be used when inserting "htmlified" plain text (HTML without inline styles and styling elements like <b/>, <strong/>, <span style="..."/>).

Example:

CKEDITOR.instances.editor1.insertHtml( '<p>This is a new paragraph.</p>' );

Parameters

  • html : String

    HTML code to be inserted into the editor.

  • mode : String (optional)

    Mode in which HTML will be inserted.

    Defaults to: 'html'

CKEDITOR.editor
view source
( text )
Insert text content into the currently selected position in the editor in WYSIWYG mode. ...

Insert text content into the currently selected position in the editor in WYSIWYG mode. The styles of the selected element will be applied to the inserted text. Spaces around the text will be leaving untouched.

CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' );

Available since: 3.5

Parameters

  • text : String

    Text to be inserted into the editor.

CKEDITOR.editor
view source
( snapshot )
Loads "raw data" into the editor. ...

Loads "raw data" into the editor. The data is loaded with processing straight to the editing area. It should not be used as a way to load any kind of data, but instead in combination with getSnapshot produced data.

var data = editor.getSnapshot();
editor.loadSnapshot( data );

CKEDITOR.editor.setData

Parameters

  • snapshot : Object
CKEDITOR.editor
view source
( [sel] ) : Boolean
Locks the selection made in the editor in order to make it possible to manipulate it without browser interference. ...

Locks the selection made in the editor in order to make it possible to manipulate it without browser interference. A locked selection is cached and remains unchanged until it is released with the unlockSelection method.

Parameters

Returns

  • Boolean

    true if selection was locked.

( 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

CKEDITOR.editor
view source
( dialogName, callback ) : CKEDITOR.dialog
Loads and opens a registered dialog. ...

Loads and opens a registered dialog.

CKEDITOR.instances.editor1.openDialog( 'smiley' );

Parameters

  • dialogName : String

    The registered name of the dialog.

  • callback : Function

    The function to be invoked after dialog instance created.

Returns

CKEDITOR.editor
view source
( url, [width], [height], [options] )
Opens Browser in a popup. ...

Opens Browser in a popup. The width and height parameters accept numbers (pixels) or percent (of screen size) values.

Parameters

  • url : String

    The url of the external file browser.

  • width : Number/String (optional)

    Popup window width.

    Defaults to: '80%'

  • height : Number/String (optional)

    Popup window height.

    Defaults to: '70%'

  • options : String (optional)

    Popup window features.

    Defaults to: 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes'

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.

CKEDITOR.editor
view source
( name )
Removes a particular menu item added before from the editor context menu. ...

Removes a particular menu item added before from the editor context menu.

Available since: 3.6.1

Parameters

  • name : String

    The name of the desired menu item.

CKEDITOR.editor
view source
( style )
Removes the style from the editor's current selection. ...

Removes the style from the editor's current selection. Shorthand for CKEDITOR.style.remove.

Parameters

CKEDITOR.editor
view source
( )
Resets the "dirty state" of the editor so subsequent calls to checkDirty will return false if the user will not have ...

Resets the "dirty state" of the editor so subsequent calls to checkDirty will return false if the user will not have made further changes to the contents.

alert( editor.checkDirty() ); // e.g. true
editor.resetDirty();
alert( editor.checkDirty() ); // false
CKEDITOR.editor
view source
( )
Resets the undo stack. ...

Resets the undo stack.

CKEDITOR.editor
view source
( width, height, [isContentHeight], [resizeInner] )
Resizes the editor interface. ...

Resizes the editor interface.

editor.resize( 900, 300 );

editor.resize( '100%', 450, true );

Parameters

  • width : Number/String

    The new width. It can be an integer denoting a value in pixels or a CSS size value with unit.

  • height : Number/String

    The new height. It can be an integer denoting a value in pixels or a CSS size value with unit.

  • isContentHeight : Boolean (optional)

    Indicates that the provided height is to be applied to the editor content area, and not to the entire editor interface. Defaults to false.

  • resizeInner : Boolean (optional)

    Indicates that it is the inner interface element that must be resized, not the outer element. The default theme defines the editor interface inside a pair of <span> elements (<span><span>...</span></span>). By default the first, outer <span> element receives the sizes. If this parameter is set to true, the second, inner <span> is resized instead.

CKEDITOR.editor
view source
( fakeElement )
...

Parameters

  • fakeElement : Object
CKEDITOR.editor
view source
( [checkNow] )
Check the selection change in editor and potentially fires the selectionChange event. ...

Check the selection change in editor and potentially fires the selectionChange event.

Parameters

  • checkNow : Boolean (optional)

    Force the check to happen immediately instead of coming with a timeout delay (default).

    Defaults to: false

CKEDITOR.editor
view source
( enterMode, shiftEnterMode )
Sets the active enter modes (enterMode and shiftEnterMode). ...

Sets the active enter modes (enterMode and shiftEnterMode). Fires the activeEnterModeChange event.

Prior to CKEditor 4.3 enter modes were static and it was enough to check CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode when implementing a feature which should depend on the enter modes. Since CKEditor 4.3 these options are source of initial:

However, the dynamic enter modes can be changed during runtime by using this method, to reflect the selection context. For example, if selection is moved to the widget's nested editable which is a blockless one, then the active enter modes should be changed to CKEDITOR.ENTER_BR (in this case Widget System takes care of that).

Note: This method should not be used to configure editor – use CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode instead. This method should be used only to dynamically change enter modes during runtime based on selection changes. Keep in mind that changed enter mode may be overwritten by other plugin/feature when it decided that the changed context requires this.

Note: In case of blockless editor (inline editor based on element which cannot contain block elements – see blockless) only CKEDITOR.ENTER_BR is a valid enter mode. Therefore this method will not allow to set other values.

Note: Changing the active filter may cause enter mode change if default enter modes are not allowed by the new filter.

Available since: 4.3

Parameters

CKEDITOR.editor
view source
( filter )
Sets the active filter (activeFilter). ...

Sets the active filter (activeFilter). Fires activeFilterChange event.

// Set active filter which allows only 4 elements.
// Buttons like Bold, Italic will be disabled.
var filter = new CKEDITOR.filter( 'p strong em br' );
editor.setActiveFilter( filter );

Setting new filter will also change the active enter modes to the first values allowed by the new filter (see CKEDITOR.filter.getAllowedEnterMode).

Available since: 4.3

Parameters

  • filter : CKEDITOR.filter

    Filter instance or a falsy value (e.g. null) to reset to the default one.

CKEDITOR.editor
view source
( data, [options] )
Sets the editor data. ...

Sets the editor data. The data must be provided in the raw format (HTML).

Note that this method is asynchronous. The callback parameter must be used if interaction with the editor is needed after setting the data.

CKEDITOR.instances.editor1.setData( '<p>This is the editor data.</p>' );

CKEDITOR.instances.editor1.setData( '<p>Some other editor data.</p>', {
    callback: function() {
        this.checkDirty(); // true
    }
} );

Note: In CKEditor 4.4.2 the signature of this method has changed. All arguments except data were wrapped into the options object. However, backward compatibility was preserved and it is still possible to use the data, callback, internal arguments.

Parameters

  • data : String

    HTML code to replace current editor content.

  • options : Object (optional)
    • internal : Boolean (optional)

      Whether to suppress any event firing when copying data internally inside the editor.

      Defaults to: false

    • callback : Function (optional)

      Function to be called after setData is completed (on dataReady).

    • noSnapshot : Boolean (optional)

      If set to true, it will prevent recording an undo snapshot. Introduced in CKEditor 4.4.2.

      Defaults to: false

CKEDITOR.editor
view source
( keystroke, [behavior] )
Assigns keystrokes associated to editor commands. ...

Assigns keystrokes associated to editor commands.

editor.setKeystroke( CKEDITOR.CTRL + 115, 'save' ); // Assigned CTRL+S to "save" command.
editor.setKeystroke( CKEDITOR.CTRL + 115, false );  // Disabled CTRL+S keystroke assignment.
editor.setKeystroke( [
    [ CKEDITOR.ALT + 122, false ],
    [ CKEDITOR.CTRL + 121, 'link' ],
    [ CKEDITOR.SHIFT + 120, 'bold' ]
] );

This method may be used in the following cases:

  • By plugins (like link or basicstyles) to set their keystrokes when plugins are being loaded.
  • During the runtime to modify existing keystrokes.

The editor handles keystroke configuration in the following order:

  1. Plugins use this method to define default keystrokes.
  2. Editor extends default keystrokes with CKEDITOR.config.keystrokes.
  3. Editor blocks keystrokes defined in CKEDITOR.config.blockedKeystrokes.

After all, you can still set new keystrokes using this method during the runtime.

Available since: 4.0

Parameters

  • keystroke : Number/Array

    Keystroke or an array of keystroke definitions.

  • behavior : String/Boolean (optional)

    A command to be executed on the keystroke.

CKEDITOR.editor
view source
( [newMode], [callback] )
Changes the editing mode of this editor instance. ...

Changes the editing mode of this editor instance.

Note: The mode switch could be asynchronous depending on the mode provider. Use the callback to hook subsequent code.

// Switch to "source" view.
CKEDITOR.instances.editor1.setMode( 'source' );
// Switch to "wysiwyg" view and be notified on completion.
CKEDITOR.instances.editor1.setMode( 'wysiwyg', function() { alert( 'wysiwyg mode loaded!' ); } );

Parameters

  • newMode : String (optional)

    If not specified, the CKEDITOR.config.startupMode will be used.

  • callback : Function (optional)

    Optional callback function which is invoked once the mode switch has succeeded.

CKEDITOR.editor
view source
( [isReadOnly] )
Puts or restores the editor into read-only state. ...

Puts or restores the editor into read-only state. When in read-only, the user is not able to change the editor contents, but can still use some editor features. This function sets the readOnly property of the editor, firing the readOnly event.

Note: the current editing area will be reloaded.

Available since: 3.6

Parameters

  • isReadOnly : Boolean (optional)

    Indicates that the editor must go read-only (true, default) or be restored and made editable (false).

CKEDITOR.editor
view source
( color )
Sets the color of the editor user interface. ...

Sets the color of the editor user interface. This method accepts a color value in hexadecimal notation, with a # character (e.g. #ffffff).

    CKEDITOR.instances.editor1.setUiColor( '#ff00ff' );

Parameters

  • color : String

    The desired editor UI color in hexadecimal notation.

CKEDITOR.editor
view source
( [restore] )
Unlocks the selection made in the editor and locked with the unlockSelection method. ...

Unlocks the selection made in the editor and locked with the unlockSelection method. An unlocked selection is no longer cached and can be changed.

Parameters

  • restore : Boolean (optional)

    If set to true, the selection is restored back to the selection saved earlier by using the CKEDITOR.dom.selection.lock method.

CKEDITOR.editor
view source
( )
Updates the <textarea> element that was replaced by the editor with the current data available in the editor. ...

Updates the <textarea> element that was replaced by the editor with the current data available in the editor.

Note: This method will only affect those editor instances created with CKEDITOR.ELEMENT_MODE_REPLACE element mode or inline instances bound to <textarea> elements.

CKEDITOR.instances.editor1.updateElement();
alert( document.getElementById( 'editor1' ).value ); // The current editor data.

CKEDITOR.editor.element

Defined By

Events

CKEDITOR.editor
view source
( evt )
Fired by the setActiveEnterMode method when any of the active enter modes is changed. ...

Fired by the setActiveEnterMode method when any of the active enter modes is changed. See also the activeEnterMode and activeShiftEnterMode properties.

Available since: 4.3

Parameters

CKEDITOR.editor
view source
( evt )
Fired by the setActiveFilter method when the activeFilter is changed. ...

Fired by the setActiveFilter method when the activeFilter is changed.

Available since: 4.3

Parameters

CKEDITOR.editor
view source
( evt )
Fired after the command execution when execCommand is called. ...

Fired after the command execution when execCommand is called.

Parameters

  • evt : CKEDITOR.eventInfo
    • editor : CKEDITOR.editor

      This editor instance.

    • data : Object
      • name : String

        The command name.

      • commandData : Object

        The data sent to the command.

      • command : CKEDITOR.command

        The command itself.

      • returnValue : Object

        The value returned by the command execution.

CKEDITOR.editor
view source
( evt )
Event fired at the end of the setData call execution. ...

Event fired at the end of the setData call execution. Usually it is better to use the dataReady event.

Parameters

CKEDITOR.editor
view source
( evt )
Fired after an undo image is created. ...

Fired after an undo image is created. An undo image represents the editor state at some point. It is saved into the undo store, so the editor is able to recover the editor state on undo and redo operations.

Available since: 3.5.3

Parameters

CKEDITOR.editor
view source
( evt )
Event fired by the editor in order to get accessibility help label. ...

Event fired by the editor in order to get accessibility help label. The event is responded to by a component which provides accessibility help (i.e. the a11yhelp plugin) hence the editor is notified whether accessibility help is available.

Providing info:

editor.on( 'ariaEditorHelpLabel', function( evt ) {
        evt.data.label = editor.lang.common.editorHelp;
} );

Getting label:

var helpLabel = editor.fire( 'ariaEditorHelpLabel', {} ).label;

Available since: 4.4.3

Parameters

CKEDITOR.editor
view source
( evt )
Fired when some elements are added to the document. ...

Fired when some elements are added to the document.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the Auto Grow plugin is about to change the size of the editor. ...

Fired when the Auto Grow plugin is about to change the size of the editor.

Parameters

  • evt : CKEDITOR.eventInfo
    • editor : CKEDITOR.editor

      This editor instance.

    • data : Object
      • currentHeight : Number

        The current editor height (before resizing).

      • newHeight : Number

        The new editor height (after resizing). It can be changed to achieve a different height value to be used instead.

CKEDITOR.editor
view source
( evt )
Fired before the command execution when execCommand is called. ...

Fired before the command execution when execCommand is called.

Parameters

  • evt : CKEDITOR.eventInfo
    • editor : CKEDITOR.editor

      This editor instance.

    • data : Object
      • name : String

        The command name.

      • commandData : Object

        The data to be sent to the command. This can be manipulated by the event listener.

      • command : CKEDITOR.command

        The command itself.

CKEDITOR.editor
view source
( evt )
Internal event to get the current data. ...

Internal event to get the current data.

Parameters

CKEDITOR.editor
view source
( evt )
Fired before changing the editing mode. ...

Fired before changing the editing mode. See also beforeSetMode and mode.

Parameters

CKEDITOR.editor
view source
( evt )deprecated
Fired before the paste event. ...

Fired before the paste event. Allows to preset data type.

Note: This event is deprecated. Add a 0 priority listener for the paste event instead.

This event has been deprected

Parameters

CKEDITOR.editor
view source
( evt )
Fired before the editor mode is set. ...

Fired before the editor mode is set. See also mode and beforeModeUnload.

Available since: 3.5.3

Parameters

CKEDITOR.editor
view source
( evt )
Fired before an undo image is to be created. ...

Fired before an undo image is to be created. An undo image represents the editor state at some point. It is saved into the undo store, so the editor is able to recover the editor state on undo and redo operations.

Available since: 3.5.3

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the editor instance loses the input focus. ...

Fired when the editor instance loses the input focus.

Note: This event will NOT be triggered when focus is moved internally, e.g. from the editable to other part of the editor UI like dialog. If you're interested on only the editable focus state listen to the CKEDITOR.editable.focus and CKEDITOR.editable.blur events instead.

editor.on( 'blur', function( e ) {
    alert( 'The editor named ' + e.editor.name + ' lost the focus' );
} );

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the content of the editor is changed. ...

Fired when the content of the editor is changed.

Due to performance reasons, it is not verified if the content really changed. The editor instead watches several editing actions that usually result in changes. This event may thus in some cases be fired when no changes happen or may even get fired twice.

If it is important not to get the change event fired too often, you should compare the previous and the current editor content inside the event listener. It is not recommended to do that on every change event.

Please note that the change event is only fired in the wysiwyg mode. In order to implement similar functionality in the source mode, you can listen for example to the key event or the native input event (not supported by Internet Explorer 8).

editor.on( 'mode', function() {
    if ( this.mode == 'source' ) {
        var editable = editor.editable();
        editable.attachListener( editable, 'input', function() {
            // Handle changes made in the source mode.
        } );
    }
} );

Available since: 4.2

Parameters

CKEDITOR.editor
view source
( evt )
Fired once the editor configuration is ready (loaded and processed). ...

Fired once the editor configuration is ready (loaded and processed).

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the language direction in the specific cursor position is changed ...

Fired when the language direction in the specific cursor position is changed

Parameters

CKEDITOR.editor
view source
( evt )
Fired when content of the editor (its DOM structure) is ready. ...

Fired when content of the editor (its DOM structure) is ready. It is similar to native DOMContentLoaded event, but it concerns editor's content. It is also a first event fired after CKEDITOR.editable is initialized.

This event is particularly important for classic (iframe-based) editor, because on editor initialization and every time data are set (by setData) contents DOM structure is rebuilt. Thus, e.g. you need to attach DOM events listeners on editable one more time.

On inline editor this event is fired only once - when editor is initialized for the first time. That's because setting editor's content doesn't cause editable destruction and creation.

contentDom goes along with contentDomUnload which is fired before contents DOM structure is destroyed. This is the right moment to detach content DOM events listener. Otherwise browsers like IE or Opera may throw exceptions when accessing elements from detached document.

Note: CKEDITOR.editable.attachListener is a convenient way to attach listeners that will be detached on contentDomUnload.

editor.on( 'contentDom', function() {
    var editable = editor.editable();

    editable.attachListener( editable, 'click', function() {
        console.log( 'Editable has been clicked' );
    });
});

Parameters

CKEDITOR.editor
view source
( evt )
The event fired when contents DOM changes and some of the references as well as native DOM event listeners could be l...

The event fired when contents DOM changes and some of the references as well as native DOM event listeners could be lost. This event is useful when it is important to keep track of references to elements in the editable contents from code.

Available since: 4.3

Parameters

CKEDITOR.editor
view source
( evt )
Fired before contents DOM structure is destroyed. ...

Fired before contents DOM structure is destroyed. See contentDom documentation for more details.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the custom configuration file is loaded, before the final configurations initialization. ...

Fired when the custom configuration file is loaded, before the final configurations initialization.

Custom configuration files can be loaded thorugh the CKEDITOR.config.customConfig setting. Several files can be loaded by changing this setting.

Parameters

CKEDITOR.editor
view source
( evt )
This event is fired when CKEDITOR.filter has stripped some content from the data that was loaded (e.g. ...

This event is fired when CKEDITOR.filter has stripped some content from the data that was loaded (e.g. by setData method or in the source mode) or inserted (e.g. when pasting or using the insertHtml method).

This event is useful when testing whether the CKEDITOR.config.allowedContent setting is sufficient and correct for a system that is migrating to CKEditor 4.1 (where the Advanced Content Filter was introduced).

Available since: 4.1

Parameters

CKEDITOR.editor
view source
( evt )
Fired as an indicator of the editor data loading. ...

Fired as an indicator of the editor data loading. It may be the result of calling setData explicitly or an internal editor function, like the editor editing mode switching (move to Source and back).

Parameters

CKEDITOR.editor
view source
( evt )
Fired when this editor instance is destroyed. ...

Fired when this editor instance is destroyed. The editor at this point is not usable and this event should be used to perform the clean-up in any plugin.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when a dialog is hidden. ...

Fired when a dialog is hidden.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when a dialog is shown. ...

Fired when a dialog is shown.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the language direction of an element is changed. ...

Fired when the language direction of an element is changed.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the contents of the elementsPath are changed. ...

Fired when the contents of the elementsPath are changed.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the editor instance receives the input focus. ...

Fired when the editor instance receives the input focus.

editor.on( 'focus', function( e ) {
    alert( 'The editor named ' + e.editor.name + ' is now focused' );
} );

Parameters

CKEDITOR.editor
view source
( evt )
Event fired before the getData call returns allowing additional manipulation. ...

Event fired before the getData call returns allowing additional manipulation.

Parameters

CKEDITOR.editor
view source
( evt )
Internal event to perform the getSnapshot call. ...

Internal event to perform the getSnapshot call.

Parameters

CKEDITOR.editor
view source
( evt )
Internal event to perform the insertElement call. ...

Internal event to perform the insertElement call.

Parameters

CKEDITOR.editor
view source
( evt )
Internal event to perform the insertHtml call. ...

Internal event to perform the insertHtml call.

Parameters

CKEDITOR.editor
view source
( evt )
Internal event to perform the insertText call. ...

Internal event to perform the insertText call.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the CKEDITOR instance is completely created, fully initialized and ready for interaction. ...

Fired when the CKEDITOR instance is completely created, fully initialized and ready for interaction.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when any keyboard key (or a combination thereof) is pressed in the editing area. ...

Fired when any keyboard key (or a combination thereof) is pressed in the editing area.

editor.on( 'key', function( evt ) {
    if ( evt.data.keyCode == CKEDITOR.CTRL + 90 ) {
        // Do something...

        // Cancel the event, so other listeners will not be executed and
        // the keydown's default behavior will be prevented.
        evt.cancel();
    }
} );

Usually you will want to use the setKeystroke method or the CKEDITOR.config.keystrokes option to attach a keystroke to some command. Key event listeners are usuful when some action should be executed conditionally, based for example on precise selection location.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the language is loaded into the editor instance. ...

Fired when the language is loaded into the editor instance.

Available since: 3.6.1

Parameters

CKEDITOR.editor
view source
( evt )
Internal event to perform the loadSnapshot call. ...

Internal event to perform the loadSnapshot call.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when editor's components (config, languages and plugins) are fully loaded and initialized. ...

Fired when editor's components (config, languages and plugins) are fully loaded and initialized. However, the editor will be fully ready to for interaction on instanceReady.

Parameters

CKEDITOR.editor
view source
( evt )
Locks the undo manager to prevent any save/update operations. ...

Locks the undo manager to prevent any save/update operations.

It is convenient to lock the undo manager before performing DOM operations that should not be recored (e.g. auto paragraphing).

See CKEDITOR.plugins.undo.UndoManager.lock for more details.

Note: In order to unlock the undo manager, unlockSnapshot has to be fired the same number of times that lockSnapshot has been fired.

Available since: 4.0

Parameters

CKEDITOR.editor
view source
( evt )
Event fired when the maximize command is called. ...

Event fired when the maximize command is called. It also indicates whether an editor is maximized or not.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when a menu is shown. ...

Fired when a menu is shown.

Parameters

CKEDITOR.editor
view source
( evt )
Fired after setting the editing mode. ...

Fired after setting the editing mode. See also beforeSetMode and beforeModeUnload

Parameters

CKEDITOR.editor
view source
( evt )
Fired when a clipboard operation is about to be taken into the editor. ...

Fired when a clipboard operation is about to be taken into the editor. Listeners can manipulate the data to be pasted before having it effectively inserted into the document.

Available since: 3.1

Parameters

  • evt : CKEDITOR.eventInfo
    • editor : CKEDITOR.editor

      This editor instance.

    • data : Object
      • type : String

        Type of data in data.dataValue. Usually html or text, but for listeners with priority less than 6 it may be also auto, what means that content type hasn't been recognised yet (this will be done by content type sniffer that listens with priority 6).

      • dataValue : String

        HTML to be pasted.

CKEDITOR.editor
view source
( evt )private
Internal event to open the Paste dialog. ...

Internal event to open the Paste dialog.

Parameters

CKEDITOR.editor
view source
( evt )private
Internal event to pass paste dialog's data to the listeners. ...

Internal event to pass paste dialog's data to the listeners.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when all plugins are loaded and initialized into the editor instance. ...

Fired when all plugins are loaded and initialized into the editor instance.

Parameters

CKEDITOR.editor
view source
( evt )
Event fired after the readOnly property changes. ...

Event fired after the readOnly property changes.

Available since: 3.6

Parameters

CKEDITOR.editor
view source
( evt )
Fired after an element was cleaned by the removeFormat plugin. ...

Fired after an element was cleaned by the removeFormat plugin.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the editor (replacing a <textarea> which has a required attribute) is empty during form submission. ...

Fired when the editor (replacing a <textarea> which has a required attribute) is empty during form submission.

This event replaces native required fields validation that the browsers cannot perform when CKEditor replaces <textarea> elements.

You can cancel this event to prevent the page from submitting data.

editor.on( 'required', function( evt ) {
    alert( 'Article content is required.' );
    evt.cancel();
} );

Parameters

CKEDITOR.editor
view source
( evt )
Fired after the editor instance is resized through the CKEDITOR.resize method. ...

Fired after the editor instance is resized through the CKEDITOR.resize method.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the user clicks the Save button on the editor toolbar. ...

Fired when the user clicks the Save button on the editor toolbar. This event allows to overwrite the default Save button behavior.

Available since: 4.2

Parameters

CKEDITOR.editor
view source
( evt )
Fired when the editor is about to save an undo snapshot. ...

Fired when the editor is about to save an undo snapshot. This event can be fired by plugins and customizations to make the editor save undo snapshots.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when selection inside editor has been changed. ...

Fired when selection inside editor has been changed. Note that this event is fired only when selection's start element (container of a selecion start) changes, not on every possible selection change. Thanks to that selectionChange is fired less frequently, but on every context (the elements path holding selection's start) change.

Parameters

CKEDITOR.editor
view source
( evt )
Event fired before the setData call is executed allowing additional manipulation. ...

Event fired before the setData call is executed allowing additional manipulation.

Parameters

CKEDITOR.editor
view source
( evt )
Fired when styles set is loaded. ...

Fired when styles set is loaded. During editor initialization phase the getStylesSet method returns only styles that are already loaded, which may not include e.g. styles parsed by stylesheetparser plugin. Thus, to be notified when all styles are ready you can listen on this event.

Available since: 4.1

Parameters

CKEDITOR.editor
view source
( evt )
Event fired when an UI template is added to the editor instance. ...

Event fired when an UI template is added to the editor instance. It makes it possible to bring customizations to the template source.

Parameters

  • evt : CKEDITOR.eventInfo
    • editor : CKEDITOR.editor

      This editor instance.

    • data : Object
      • name : String

        The template name.

      • source : String

        The source data for this template.

CKEDITOR.editor
view source
( evt )
This event is fired when CKEDITOR.htmlDataProcessor is converting internal HTML to output data HTML. ...

This event is fired when CKEDITOR.htmlDataProcessor is converting internal HTML to output data HTML.

By adding listeners with different priorities it is possible to process input HTML on different stages:

For example to be able to process parsed and already processed data add listener this way:

editor.on( 'toDataFormat', function( evt) {
    evt.data.dataValue; // -> CKEDITOR.htmlParser.fragment instance
}, null, null, 12 );

Available since: 4.1

Parameters

CKEDITOR.editor
view source
( evt )
This event is fired by the CKEDITOR.htmlDataProcessor when input HTML is to be purified by the CKEDITOR.htmlDataProce...

This event is fired by the CKEDITOR.htmlDataProcessor when input HTML is to be purified by the CKEDITOR.htmlDataProcessor.toHtml method.

By adding listeners with different priorities it is possible to process input HTML on different stages:

For example to be able to process parsed, but not yet filtered data add listener this way:

editor.on( 'toHtml', function( evt) {
    evt.data.dataValue; // -> CKEDITOR.htmlParser.fragment instance
}, null, null, 7 );

Available since: 4.1

Parameters

CKEDITOR.editor
view source
( evt )
Unlocks the undo manager and updates the latest snapshot. ...

Unlocks the undo manager and updates the latest snapshot.

Available since: 4.0

Parameters

CKEDITOR.editor
view source
( evt )
Amends the top of the undo stack (last undo image) with the current DOM changes. ...

Amends the top of the undo stack (last undo image) with the current DOM changes.

function() {
    editor.fire( 'saveSnapshot' );
    editor.document.body.append(...);
    // Makes new changes following the last undo snapshot a part of it.
    editor.fire( 'updateSnapshot' );
    ..
}

Parameters

CKEDITOR.editor
view source
( evt )
An event fired when a widget definition is registered by the CKEDITOR.plugins.widget.repository.add method. ...

An event fired when a widget definition is registered by the CKEDITOR.plugins.widget.repository.add method. It is possible to modify the definition being registered.

Parameters