CKEDITOR

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'

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'

CTRL key (0x110000).

Defaults to: 0x110000

Data transfer operation (drag and drop or copy and paste) started in one editor instance and ended in another.

Defaults to: 2

Available since: 4.5

Data transfer operation (drag and drop or copy and paste) started outside of the editor. The source of the data may be a textarea, HTML, another application, etc.

Defaults to: 3

Available since: 4.5

Data transfer operation (drag and drop or copy and paste) started and ended in the same editor instance.

Defaults to: 1

Available since: 4.5

Allow the dialog to be resized in both directions.

Defaults to: 3

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

Defaults to: 2

No resize for this dialog.

Defaults to: 0

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

Defaults to: 1

Dialog state when busy.

Defaults to: 2

Dialog state when idle.

Defaults to: 1

The editor is to be created inside the element.

Defaults to: 2

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

Defaults to: 3

The editor has no associated element.

Defaults to: 0

The element is to be replaced by the editor instance.

Defaults to: 1

See CKEDITOR.dom.range.checkBoundaryOfElement.

Defaults to: 2

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

Read more in the documentation and see the SDK sample.

Defaults to: 2

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

Read more in the documentation and see the SDK sample.

Defaults to: 3

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

Read more in the documentation and see the SDK sample.

Defaults to: 1

Event at target.

Defaults to: 2

Bubbling phase.

Defaults to: 3

Capturing phase.

Defaults to: 1

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

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

Defaults to: 2

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

Defaults to: 0

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

Defaults to: 4

Comment node type.

Defaults to: 8

Document node type.

Defaults to: 9

Document fragment node type.

Defaults to: 11

Element node type.

Defaults to: 1

Text node type.

Defaults to: 3

Indicates a position after end of a node.

// When used according to an element:
// <element>contents</element>^ (range is anchored in element's parent)

// When used according to a text node:
// "text"^ (range is anchored in text node's parent)

It is used as a parameter of methods like: CKEDITOR.dom.range.moveToPosition, CKEDITOR.dom.range.setStartAt and CKEDITOR.dom.range.setEndAt.

Defaults to: 4

Indicates a position after start of a node.

// When used according to an element:
// <element>^contents</element>

// When used according to a text node:
// "^text" (range is anchored in the text node)

It is used as a parameter of methods like: CKEDITOR.dom.range.moveToPosition, CKEDITOR.dom.range.setStartAt and CKEDITOR.dom.range.setEndAt.

Defaults to: 1

Indicates a position before end of a node.

// When used according to an element:
// <element>contents^</element>

// When used according to a text node:
// "text^" (range is anchored in the text node)

It is used as a parameter of methods like: CKEDITOR.dom.range.moveToPosition, CKEDITOR.dom.range.setStartAt and CKEDITOR.dom.range.setEndAt.

Defaults to: 2

Indicates a position before start of a node.

// When used according to an element:
// ^<element>contents</element> (range is anchored in element's parent)

// When used according to a text node:
// ^"text" (range is anchored in text node's parent)

It is used as a parameter of methods like: CKEDITOR.dom.range.moveToPosition, CKEDITOR.dom.range.setStartAt and CKEDITOR.dom.range.setEndAt.

Defaults to: 3

Indicates that the context node contains the other node. See CKEDITOR.dom.node.getPosition.

Defaults to: 16

Indicates that nodes are in different (detached) trees. See CKEDITOR.dom.node.getPosition.

Defaults to: 1

Indicates that the context node follows the other node. See CKEDITOR.dom.node.getPosition.

Defaults to: 2

Indicates that positions of both nodes are identical (this is the same node). See CKEDITOR.dom.node.getPosition.

Defaults to: 0

Indicates that the context node is a descendant of the other node. See CKEDITOR.dom.node.getPosition.

Defaults to: 8

Indicates that the context node precedes the other node. See CKEDITOR.dom.node.getPosition.

Defaults to: 4

Element selection.

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

Defaults to: 3

No selection.

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

Defaults to: 1

A text or a collapsed selection.

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

Defaults to: 2

SHIFT key (0x220000).

Defaults to: 0x220000

See CKEDITOR.dom.range.shrink.

Defaults to: 1

See CKEDITOR.dom.range.shrink.

Defaults to: 2

See CKEDITOR.dom.range.checkBoundaryOfElement.

Defaults to: 1

Block style type.

Read more in the CKEDITOR.style class documentation.

Defaults to: 1

Inline style type.

Read more in the CKEDITOR.style class documentation.

Defaults to: 2

Object style type.

Read more in the CKEDITOR.style class documentation.

Defaults to: 3

Used to indicate the DISABLED state.

Defaults to: 0

Used to indicate the OFF or INACTIVE state.

Defaults to: 2

Used to indicate the ON or ACTIVE state.

Defaults to: 1

Button UI element.

Defaults to: 'button'

Button UI element.

Defaults to: 'menubutton'

Panel UI element.

Defaults to: 'panel'

Button UI element.

Defaults to: 'panelbutton'

Button UI element.

Defaults to: 'richcombo'

Separator UI element.

Defaults to: 'separator'

Error reporting verbosity level. When verbosity is set to this value, only error messages will be output to the console. It is a binary flag so it might be combined with the VERBOSITY_WARN flag.

Defaults to: 2

Available since: 4.5.4

Warning reporting verbosity level. When verbosity is set to this value, only warn messages will be output to the console. It is a binary flag so it might be combined with the VERBOSITY_ERROR flag.

Defaults to: 1

Available since: 4.5.4

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.

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

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.

alert( CKEDITOR.document.getBody().getName() ); // 'body'

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

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

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

alert( CKEDITOR.rnd ); // e.g. 319

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'

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.

Note: There is a known issue where "icons.png" does not include timestamp and might get cached. We are working on having it fixed.

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

Defaults to: ''

Verbosity of error and warn methods. Accepts binary flags VERBOSITY_WARN and VERBOSITY_ERROR.

        CKEDITOR.verbosity = 0; // No console output after CKEDITOR.warn and CKEDITOR.error methods.
        CKEDITOR.verbosity = CKEDITOR.VERBOSITY_WARN; // Console output after CKEDITOR.warn only.
        CKEDITOR.verbosity = CKEDITOR.VERBOSITY_ERROR; // Console output after CKEDITOR.error only.
        CKEDITOR.verbosity = CKEDITOR.VERBOSITY_WARN | CKEDITOR.VERBOSITY_ERROR; // Console output after both methods.

Default value enables both VERBOSITY_WARN and VERBOSITY_ERROR.

Available since: 4.5.4

Contains the CKEditor version number.

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

Defaults to: '%VERSION%'

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

• css : String

  The style rules to be appended. CKEDITOR.config.contentsCss

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

  The created template instance.

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

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CKEditor</title>
            <!-- Make sure the path to CKEditor is correct. -->
        <script src="/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <div id="editorSpace"></div>
        <script>
            CKEDITOR.appendTo( 'editorSpace' );
        </script>
    </body>
</html>

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

• CKEDITOR.editor

  The editor instance created.

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.

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

• config : CKEDITOR.config

  A configuration object containing the settings defined for a CKEDITOR.editor instance up to this function call. Note that not all settings may still be available. See Configuration Loading Order for details.

Error reporting function. When verbosity has VERBOSITY_ERROR flag set, it fires log event with the type set to error. The fired event also contains the provided errorCode and additionalData.

Available since: 4.5.4

Parameters

• errorCode : String

  Error code describing the reported problem.

• additionalData : Object (optional)

  Additional data associated with the reported problem.

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

Returns

• String

  A string containing CSS rules.

Retrieves a defined template created with addTemplate.

Parameters

• name : String

  The template name.

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.

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

Note: If the DOM element for which inline editing is being enabled does not have the contenteditable attribute set to true, the editor will start in read-only mode.

<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

• CKEDITOR.editor

  The editor instance created.

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

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();

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

• editor : CKEDITOR.editor

  The editor instance to be removed.

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. It is recommended to use <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.editor

  The editor instance created.

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 a custom evaluation function.
CKEDITOR.replaceAll( function( textarea, config ) {
    // A function that needs to be evaluated for the <textarea>
    // to be replaced. It must explicitly return "false" to ignore a
    // specific <textarea>.
    // You can also customize the editor instance by having the function
    // modify the "config" parameter.
} );

// Full page example where three <textarea> elements are replaced.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1"></textarea>
        <textarea name="editor2"></textarea>
        <textarea name="editor3"></textarea>
        <script>
            // Replace all three <textarea> elements above with CKEditor instances.
            CKEDITOR.replaceAll();
        </script>
    </body>
</html>

Parameters

• className : String (optional)

  The <textarea> class name.

• evaluator : Function (optional)

  An evaluation 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.

Warning reporting function. When verbosity has the VERBOSITY_WARN flag set, it fires the log event with type set to warn. Fired event contains also provided errorCode and additionalData.

Available since: 4.5.4

Parameters

• errorCode : String

  Error code describing reported problem.

• additionalData : Object (optional)

  Additional data associated with reported problem.

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

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

    This editor instance.

  • data : Object
    • dataValue : String

      The data that will go to the preview.

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

• evt : CKEDITOR.eventInfo

Event 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

• evt : CKEDITOR.eventInfo
  • data : CKEDITOR.dialog.definition

    The dialog defination that is being loaded.

  • editor : CKEDITOR.editor

    The editor instance that will use the dialog.

Event 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

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

    The editor instance that has been created.

Event fired when a CKEDITOR instance is destroyed.

Parameters

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

    The editor instance that has been destroyed.

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

Parameters

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

    This editor instance that has been loaded.

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

Parameters

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

    The editor instance that has been created.

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

Parameters

• evt : CKEDITOR.eventInfo

Fired by warn and error methods. Default listener logs provided information to the console.

This event can be used to provide a custom error/warning handler:

        CKEDTIOR.on( 'log', function( evt ) {
            // Cancel default listener.
            evt.cancel();
            // Log event data.
            console.log( evt.data.type, evt.data.errorCode, evt.data.additionalData );
        } );

Available since: 4.5.4

Parameters

• evt : CKEDITOR.eventInfo
  • data : Object
    • type : String

      Log type. Can be error or warn.

    • errorCode : String

      Error code describing the reported problem.

    • additionalData : Object (optional)

      Additional data associated with this log event.

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

Parameters

• evt : CKEDITOR.eventInfo