CKEditor 4 Documentation

CKEDITOR

Files

This is the API entry point. The entire CKEditor code runs under this object.

Defined By

Config options

Disables creating the inline editor automatically for elements with contenteditable attribute set to the true. ...

Disables creating the inline editor automatically for elements with contenteditable attribute set to the true.

CKEDITOR.disableAutoInline = true;

Defaults to: false

CKEDITOR
view source
: String
The class name used to identify <textarea> elements to be replaced by CKEditor instances. ...

The class name used to identify <textarea> elements to be replaced by CKEditor instances. Set it to empty/null to disable this feature.

CKEDITOR.replaceClass = 'rich_editor';

Defaults to: 'ckeditor'

CKEDITOR
view source
: String
The skin to load for all created instances, it may be the name of the skin folder inside the editor installation path...

The skin to load for all created instances, it may be the name of the skin folder inside the editor installation path, or the name and the path separated by a comma.

Note: This is a global configuration that applies to all instances.

CKEDITOR.skinName = 'moono';

CKEDITOR.skinName = 'myskin,/customstuff/myskin/';

Defaults to: 'moono'

Defined By

Properties

CKEDITOR
view source
: Numberreadonly
ALT key (0x440000). ...

ALT key (0x440000).

Defaults to: 0x440000

CKEDITOR
view source
: Numberreadonly
CTRL key (0x110000). ...

CTRL key (0x110000).

Defaults to: 0x110000

CKEDITOR
view source
: Numberreadonly
Allow the dialog to be resized in both directions. ...

Allow the dialog to be resized in both directions.

Defaults to: 3

CKEDITOR
view source
: Numberreadonly
Only allow vertical resizing for this dialog, disable horizontal resizing. ...

Only allow vertical resizing for this dialog, disable horizontal resizing.

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
No resize for this dialog. ...

No resize for this dialog.

Defaults to: 0

CKEDITOR
view source
: Numberreadonly
Only allow horizontal resizing for this dialog, disable vertical resizing. ...

Only allow horizontal resizing for this dialog, disable vertical resizing.

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
The editor is to be created inside the element. ...

The editor is to be created inside the element.

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
The editor is to be attached to the element, using it as the editing block. ...

The editor is to be attached to the element, using it as the editing block.

Defaults to: 3

CKEDITOR
view source
: Numberreadonly
The editor has no associated element. ...

The editor has no associated element.

Defaults to: 0

CKEDITOR
view source
: Numberreadonly
The element is to be replaced by the editor instance. ...

The element is to be replaced by the editor instance.

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
See CKEDITOR.dom.range.checkBoundaryOfElement. ...
CKEDITOR
view source
: Numberreadonly
Used in conjunction with CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode configuration settings to make ...

Used in conjunction with CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode configuration settings to make the editor produce <br> tags when using the Enter key.

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
Used in conjunction with CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode configuration settings to make ...

Used in conjunction with CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode configuration settings to make the editor produce <div> tags when using the Enter key.

Defaults to: 3

CKEDITOR
view source
: Numberreadonly
Used in conjunction with CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode configuration settings to make ...

Used in conjunction with CKEDITOR.config.enterMode and CKEDITOR.config.shiftEnterMode configuration settings to make the editor produce <p> tags when using the Enter key.

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
Event at target. ...

Event at target.

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
Bubbling phase. ...

Bubbling phase.

Defaults to: 3

CKEDITOR
view source
: Numberreadonly
Capturing phase. ...

Capturing phase.

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
A flag indicating that the current element and all its ancestors should not be filtered. ...

A flag indicating that the current element and all its ancestors should not be filtered.

See CKEDITOR.filter.addElementCallback for more details.

Defaults to: 2

Available since: 4.4

CKEDITOR
view source
: Numberreadonly
Determines a position relative to an element in DOM (after). ...

Determines a position relative to an element in DOM (after).

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
Determines a position relative to an element in DOM (before). ...

Determines a position relative to an element in DOM (before).

Defaults to: 0

CKEDITOR
view source
: Numberreadonly
Determines a position relative to an element in DOM (inside). ...

Determines a position relative to an element in DOM (inside).

Defaults to: 4

CKEDITOR
view source
: Numberreadonly
Comment node type. ...

Comment node type.

Defaults to: 8

CKEDITOR
view source
: Numberreadonly
Document node type. ...

Document node type.

Defaults to: 9

CKEDITOR
view source
: Numberreadonly
Document fragment node type. ...

Document fragment node type.

Defaults to: 11

CKEDITOR
view source
: Numberreadonly
Element node type. ...

Element node type.

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
Text node type. ...

Text node type.

Defaults to: 3

CKEDITOR
view source
: Numberreadonly
Element selection. ...

Element selection.

if ( editor.getSelection().getType() == CKEDITOR.SELECTION_ELEMENT )
    alert( 'An element is selected' );

Defaults to: 3

CKEDITOR
view source
: Numberreadonly
No selection. ...

No selection.

if ( editor.getSelection().getType() == CKEDITOR.SELECTION_NONE )
    alert( 'Nothing is selected' );

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
A text or a collapsed selection. ...

A text or a collapsed selection.

if ( editor.getSelection().getType() == CKEDITOR.SELECTION_TEXT )
    alert( 'A text is selected' );

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
SHIFT key (0x220000). ...

SHIFT key (0x220000).

Defaults to: 0x220000

CKEDITOR
view source
: Numberreadonly
See CKEDITOR.dom.range.shrink. ...

See CKEDITOR.dom.range.shrink.

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
See CKEDITOR.dom.range.shrink. ...

See CKEDITOR.dom.range.shrink.

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
See CKEDITOR.dom.range.checkBoundaryOfElement. ...
CKEDITOR
view source
: Numberreadonly
Block style type. ...

Block style type.

Read more in the CKEDITOR.style class documentation.

Defaults to: 1

CKEDITOR
view source
: Numberreadonly
Inline style type. ...

Inline style type.

Read more in the CKEDITOR.style class documentation.

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
Object style type. ...

Object style type.

Read more in the CKEDITOR.style class documentation.

Defaults to: 3

CKEDITOR
view source
: Numberreadonly
Used to indicate the DISABLED state. ...

Used to indicate the DISABLED state.

Defaults to: 0

CKEDITOR
view source
: Numberreadonly
Used to indicate the OFF or INACTIVE state. ...

Used to indicate the OFF or INACTIVE state.

Defaults to: 2

CKEDITOR
view source
: Numberreadonly
Used to indicate the ON or ACTIVE state. ...

Used to indicate the ON or ACTIVE state.

Defaults to: 1

CKEDITOR
view source
: Stringreadonly
Button UI element. ...

Button UI element.

Defaults to: 'button'

CKEDITOR
view source
: Stringreadonly
Button UI element. ...

Button UI element.

Defaults to: 'menubutton'

CKEDITOR
view source
: Stringreadonly
Panel UI element. ...

Panel UI element.

Defaults to: 'panel'

CKEDITOR
view source
: Stringreadonly
Button UI element. ...

Button UI element.

Defaults to: 'panelbutton'

CKEDITOR
view source
: Stringreadonly
Button UI element. ...

Button UI element.

Defaults to: 'richcombo'

CKEDITOR
view source
: Stringreadonly
Separator UI element. ...

Separator UI element.

Defaults to: 'separator'

CKEDITOR
view source
: Objectprivate
Private object used to hold core stuff. ...

Private object used to hold core stuff. It should not be used outside of the API code as properties defined here may change at any time without notice.

Defaults to: {pending: []}

CKEDITOR
view source
: String
The full URL for the CKEditor installation directory. ...

The full URL for the CKEditor installation directory. It is possible to manually provide the base path by setting a global variable named CKEDITOR_BASEPATH. This global variable must be set before the editor script loading.

alert( CKEDITOR.basePath ); // e.g. 'http://www.example.com/ckeditor/'
The editor which is currently active (has user focus). ...

The editor which is currently active (has user focus).

function showCurrentEditorName() {
    if ( CKEDITOR.currentInstance )
        alert( CKEDITOR.currentInstance.name );
    else
        alert( 'Please focus an editor first.' );
}CKEDITOR#event-currentInstance
The document of the window storing the CKEDITOR object. ...

The document of the window storing the CKEDITOR object.

alert( CKEDITOR.document.getBody().getName() ); // 'body'
CKEDITOR
view source
: Object
Stores references to all editor instances created. ...

Stores references to all editor instances created. The name of the properties in this object correspond to instance names, and their values contain the CKEDITOR.editor object representing them.

alert( CKEDITOR.instances.editor1.name ); // 'editor1'

Defaults to: {}

The time to wait (in seconds) to load the full editor code after the page load, if the "ckeditor_basic" file is used. ...

The time to wait (in seconds) to load the full editor code after the page load, if the "ckeditor_basic" file is used. If set to zero, the editor is loaded on demand, as soon as an instance is created.

This value must be set on the page before the page load completion.

// Loads the full source after five seconds.
CKEDITOR.loadFullCoreTimeout = 5;

Defaults to: 0

CKEDITOR
view source
: String
Contains the CKEditor revision number. ...

Contains the CKEditor revision number. The revision number is incremented automatically, following each modification to the CKEditor source code.

alert( CKEDITOR.revision ); // e.g. '3975'

Defaults to: '%REV%'

CKEDITOR
view source
: Number
A 3-digit random integer, valid for the entire life of the CKEDITOR object. ...

A 3-digit random integer, valid for the entire life of the CKEDITOR object.

alert( CKEDITOR.rnd ); // e.g. 319
CKEDITOR
view source
: String
Indicates the API loading status. ...

Indicates the API loading status. The following statuses are available:

  • unloaded: the API is not yet loaded.
  • basic_loaded: the basic API features are available.
  • basic_ready: the basic API is ready to load the full core code.
  • loaded: the API can be fully used.

Example:

if ( CKEDITOR.status == 'loaded' ) {
    // The API can now be fully used.
    doSomething();
} else {
    // Wait for the full core to be loaded and fire its loading.
    CKEDITOR.on( 'load', doSomething );
    CKEDITOR.loadFullCore && CKEDITOR.loadFullCore();
}

Defaults to: 'unloaded'

CKEDITOR
view source
: String
A constant string unique for each release of CKEditor. ...

A constant string unique for each release of CKEditor. Its value is used, by default, to build the URL for all resources loaded by the editor code, guaranteeing clean cache results when upgrading.

alert( CKEDITOR.timestamp ); // e.g. '87dm'

Defaults to: ''

CKEDITOR
view source
: String
Contains the CKEditor version number. ...

Contains the CKEditor version number.

alert( CKEDITOR.version ); // e.g. 'CKEditor 3.4.1'

Defaults to: '%VERSION%'

Defined By

Methods

CKEDITOR
view source
( editor )
Adds an editor instance to the global CKEDITOR object. ...

Adds an editor instance to the global CKEDITOR object. This function is available for internal use mainly.

Parameters

CKEDITOR
view source
( css )
Adds CSS rules to be appended to the editor document. ...

Adds CSS rules to be appended to the editor document. This method is mostly used by plugins to add custom styles to the editor document. For basic content styling the contents.css file should be used instead.

Note: This function should be called before the creation of editor instances.

// Add styles for all headings inside editable contents.
CKEDITOR.addCss( '.cke_editable h1,.cke_editable h2,.cke_editable h3 { border-bottom: 1px dotted red }' );

Parameters

CKEDITOR
view source
( name, source ) : CKEDITOR.template
Adds a named CKEDITOR.template instance to be reused among all editors. ...

Adds a named CKEDITOR.template instance to be reused among all editors. This will return the existing one if a template with same name is already defined. Additionally, it fires the "template" event to allow template source customization.

Parameters

  • name : String

    The name which identifies a UI template.

  • source : String

    The source string for constructing this template.

Returns

CKEDITOR
view source
( element, [config], [data] ) : CKEDITOR.editor
Creates a new editor instance at the end of a specific DOM element. ...

Creates a new editor instance at the end of a specific DOM element.

<div id="editorSpace"></div>
...
CKEDITOR.appendTo( 'editorSpace' );

Parameters

  • element : Object/String

    The DOM element, its ID, or name.

  • config : Object (optional)

    The specific configuration to apply to this editor instance. Configuration set here will override the global CKEditor settings (see CKEDITOR.config).

  • data : String (optional)

    Since 3.3. Initial value for the instance.

Returns

Specify a function to execute when the DOM is fully loaded. ...

Specify a function to execute when the DOM is fully loaded.

If called after the DOM has been initialized, the function passed in will be executed immediately.

CKEDITOR
view source
( config )
Function called upon loading a custom configuration file that can modify the editor instance configuration (CKEDITOR....

Function called upon loading a custom configuration file that can modify the editor instance configuration (CKEDITOR.editor.config). It is usually defined inside the custom configuration files that can include developer defined settings.

// This is supposed to be placed in the config.js file.
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

Parameters

CKEDITOR
view source
( ) : String
Returns a string will all CSS rules passed to the addCss method. ...

Returns a string will all CSS rules passed to the addCss method.

Returns

  • String

    A string containing CSS rules.

CKEDITOR
view source
( name )
Retrieves a defined template created with addTemplate. ...

Retrieves a defined template created with addTemplate.

Parameters

  • name : String

    The template name.

CKEDITOR
view source
( resource ) : String
Gets the full URL for CKEditor resources. ...

Gets the full URL for CKEditor resources. By default, URLs returned by this function contain a querystring parameter ("t") set to the timestamp value.

It is possible to provide a custom implementation of this function by setting a global variable named CKEDITOR_GETURL. This global variable must be set before the editor script loading. If the custom implementation returns nothing (==null), the default implementation is used.

// e.g. 'http://www.example.com/ckeditor/skins/default/editor.css?t=87dm'
alert( CKEDITOR.getUrl( 'skins/default/editor.css' ) );

// e.g. 'http://www.example.com/skins/default/editor.css?t=87dm'
alert( CKEDITOR.getUrl( '/skins/default/editor.css' ) );

// e.g. 'http://www.somesite.com/skins/default/editor.css?t=87dm'
alert( CKEDITOR.getUrl( 'http://www.somesite.com/skins/default/editor.css' ) );

Parameters

  • resource : String

    The resource whose full URL we want to get. It may be a full, absolute, or relative URL.

Returns

  • String

    The full URL.

CKEDITOR
view source
( element, [instanceConfig] ) : CKEDITOR.editor
Turns a DOM element with contenteditable attribute set to true into a CKEditor instance. ...

Turns a DOM element with contenteditable attribute set to true into a CKEditor instance. Check CKEDITOR.dtd.$editable for the list of allowed element names.

<div contenteditable="true" id="content">...</div>
...
CKEDITOR.inline( 'content' );

It is also possible to create an inline editor from the <textarea> element. If you do so, an additional <div> element with editable content will be created directly after the <textarea> element and the <textarea> element will be hidden.

Parameters

  • element : Object/String

    The DOM element or its ID.

  • instanceConfig : Object (optional)

    The specific configurations to apply to this editor instance. See CKEDITOR.config.

Returns

Calls inline for all page elements with contenteditable attribute set to true. ...

Calls inline for all page elements with contenteditable attribute set to true.

Forces the full CKEditor core code, in the case only the basic code has been loaded (ckeditor_basic.js). ...

Forces the full CKEditor core code, in the case only the basic code has been loaded (ckeditor_basic.js). This method self-destroys (becomes undefined) in the first call or as soon as the full code is available.

// Check if the full core code has been loaded and load it.
if ( CKEDITOR.loadFullCore )
    CKEDITOR.loadFullCore();
CKEDITOR
view source
( editor )private
Removes an editor instance from the global CKEDITOR object. ...

Removes an editor instance from the global CKEDITOR object. This function is available for internal use only. External code must use CKEDITOR.editor.destroy.

Parameters

CKEDITOR
view source
( element, [config] ) : CKEDITOR.editor
Replaces a <textarea> or a DOM element (<div>) with a CKEditor instance. ...

Replaces a <textarea> or a DOM element (<div>) with a CKEditor instance. For textareas, the initial value in the editor will be the textarea value. For DOM elements, their innerHTML will be used instead. We recommend using <textarea> and <div> elements only.

<textarea id="myfield" name="myfield"></textarea>
...
CKEDITOR.replace( 'myfield' );

var textarea = document.body.appendChild( document.createElement( 'textarea' ) );
CKEDITOR.replace( textarea );

Parameters

  • element : Object/String

    The DOM element (textarea), its ID, or name.

  • config : Object (optional)

    The specific configuration to apply to this editor instance. Configuration set here will override the global CKEditor settings (see CKEDITOR.config).

Returns

CKEDITOR
view source
( [className], [function] )
Replaces all <textarea> elements available in the document with editor instances. ...

Replaces all <textarea> elements available in the document with editor instances.

// Replace all <textarea> elements in the page.
CKEDITOR.replaceAll();

// Replace all <textarea class="myClassName"> elements in the page.
CKEDITOR.replaceAll( 'myClassName' );

// Selectively replace <textarea> elements, based on custom assertions.
CKEDITOR.replaceAll( function( textarea, config ) {
    // An assertion function that needs to be evaluated for the <textarea>
    // to be replaced. It must explicitely return "false" to ignore a
    // specific <textarea>.
    // You can also customize the editor instance by having the function
    // modify the "config" parameter.
} );

Parameters

  • className : String (optional)

    The <textarea> class name.

  • function : Function (optional)

    An assertion function that must return true for a <textarea> to be replaced with the editor. If the function returns false, the <textarea> element will not be replaced.

Defined By

Events

CKEDITOR
view source
( evt )
Fired when a panel is added to the document. ...

Fired when a panel is added to the document.

Parameters

Event fired when executing preview command, which allows additional data manipulation. ...

Event fired when executing preview command, which allows additional data manipulation. With this event, the raw HTML content of the preview window to be displayed can be altered or modified.

Parameters

Fired when the CKEDITOR.currentInstance object reference changes. ...

Fired when the CKEDITOR.currentInstance object reference changes. This may happen when setting the focus on different editor instances in the page.

var editor; // A variable to store a reference to the current editor.
CKEDITOR.on( 'currentInstance', function() {
    editor = CKEDITOR.currentInstance;
} );

Parameters

Fired when a dialog definition is about to be used to create a dialog into an editor instance. ...

Fired when a dialog definition is about to be used to create a dialog into an editor instance. This event makes it possible to customize the definition before creating it.

Note that this event is called only the first time a specific dialog is opened. Successive openings will use the cached dialog, and this event will not get fired.

Parameters

Fired when a CKEDITOR instance is created, but still before initializing it. ...

Fired when a CKEDITOR instance is created, but still before initializing it. To interact with a fully initialized instance, use the instanceReady event instead.

Parameters

Fired when a CKEDITOR instance is destroyed. ...

Fired when a CKEDITOR instance is destroyed.

Parameters

Fired when CKEDITOR instance's components (config, languages and plugins) are fully loaded and initialized. ...

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

Parameters

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

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

Parameters

CKEDITOR
view source
( evt )
Fired when a CKEDITOR core object is fully loaded and ready for interaction. ...

Fired when a CKEDITOR core object is fully loaded and ready for interaction.

Parameters

CKEDITOR
view source
( evt )
Fired when the last instance has been destroyed. ...

Fired when the last instance has been destroyed. This event is used to perform global memory cleanup.

Parameters