# CKEditor 3.0 JavaScript API Documentation

Code Index | File Index

## Namespaces

- CKEDITOR
- CKEDITOR.ajax
- CKEDITOR.config
- CKEDITOR.dom
- CKEDITOR.dtd
- CKEDITOR.env
- CKEDITOR.imageCacher
- CKEDITOR.loader
- CKEDITOR.plugins
- CKEDITOR.resourceManager
- CKEDITOR.scriptLoader
- CKEDITOR.skins
- CKEDITOR.test
- CKEDITOR.themes
- CKEDITOR.tools

## Classes

- CKEDITOR.commandDefinition
- CKEDITOR.dialog
- CKEDITOR.dialog.buttonDefinition
- CKEDITOR.dialog.contentDefinition
- CKEDITOR.dialog.contentDefinitionObject
- CKEDITOR.dialog.dialogDefinition
- CKEDITOR.dialog.dialogDefinitionObject
- CKEDITOR.dialog.uiElementDefinition
- CKEDITOR.dialogCommand
- CKEDITOR.dom.document
- CKEDITOR.dom.domObject
- CKEDITOR.dom.element
- CKEDITOR.dom.event
- CKEDITOR.dom.node
- CKEDITOR.dom.selection
- CKEDITOR.dom.text
- CKEDITOR.dom.window
- CKEDITOR.editor
- CKEDITOR.event
- CKEDITOR.eventInfo
- CKEDITOR.focusManager
- CKEDITOR.htmlParser
- CKEDITOR.htmlParser.cdata
- CKEDITOR.htmlParser.comment
- CKEDITOR.htmlParser.element
- CKEDITOR.htmlParser.fragment
- CKEDITOR.htmlParser.text
- CKEDITOR.htmlWriter
- CKEDITOR.keystrokeHandler
- CKEDITOR.pluginDefinition
- CKEDITOR.ui
- CKEDITOR.ui.button
- CKEDITOR.ui.dialog.button
- CKEDITOR.ui.dialog.checkbox
- CKEDITOR.ui.dialog.file
- CKEDITOR.ui.dialog.fileButton
- CKEDITOR.ui.dialog.hbox
- CKEDITOR.ui.dialog.html
- CKEDITOR.ui.dialog.labeledElement
- CKEDITOR.ui.dialog.radio
- CKEDITOR.ui.dialog.select
- CKEDITOR.ui.dialog.textarea
- CKEDITOR.ui.dialog.textInput
- CKEDITOR.ui.dialog.uiElement
- CKEDITOR.ui.dialog.vbox
- CKEDITOR.ui.handlerDefinition
- CKEDITOR.xml

# Class CKEDITOR.editor

Extends CKEDITOR.event.
Defined in: core/editor_basic.js.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| CKEDITOR.editor(instanceConfig, element, mode) Represents an editor instance.

Field Summary
Field Attributes | Field Name and Description
--- | ---
| config The configurations for this editor instance.
| element The DOM element that has been replaced by this editor instance.
| elementMode The mode in which the #element is linked to this editor instance.
| focusManager Controls the focus state of this editor instance.
| keystrokeHandler Controls keystrokes typing in this editor instance.
| mode The current editing mode.
| name The editor instance name.
| ui Namespace containing UI features related to this editor instance.

Method Summary
Method Attributes | Method Name and Description
--- | ---
<static> | CKEDITOR.editor.appendTo(elementOrId, config) Creates a new editor instance inside a specific DOM element.
<static> | CKEDITOR.editor.replace(elementOrIdOrName, config) Replaces a <textarea> or a DOM element (DIV) with a CKEditor instance.
| addCommand(commandName, commandDefinition) Adds a command definition to the editor instance.
| addCss(css)
| addMode(mode, modeEditor) Registers an editing mode.
| attachStyleStateChange(The, The) Registers a function to be called whenever a style changes its state in the editing area.
| checkDirty()
| createFakeElement(realElement, className, realElementType, isResizable)
| createFakeParserElement(realElement, className, realElementType, isResizable)
| destroy(noUpdate) Destroys the editor instance, releasing all resources used by it.
| execCommand(commandName, data) Executes a command.
| focus() Moves the selection focus to the editing are space in the editor.
| forceNextSelectionCheck()
| getCommand(commandName) Gets one of the registered commands.
| getData() Gets the editor data.
| getSelection() Gets the current selection from the editing area when in WYSIWYG mode.
| getSnapshot()
| insertElement(element) Inserts an element into the currently selected position in the editor.
| insertHtml(data) Inserts HTML into the currently selected position in the editor.
| insertText(text)
| loadSnapshot(snapshot)
| openDialog(dialogName) Loads and opens a registered dialog.
| resetDirty()
| restoreRealElement(fakeElement)
| setData(data) Sets the editor data.
| setMode(mode) Sets the current editing mode in this editor instance.
| updateElement() Updates the <textarea> element that has been replaced by the editor with the current data available in the editor.

Methods borrowed from class CKEDITOR.event:
  fire, fireOnce, hasListeners, implementOn, on, removeListener

Class Detail
CKEDITOR.editor(instanceConfig, element, mode)
Since: 3.0
Represents an editor instance. This constructor should be rarely used, being the CKEDITOR methods preferible.

Parameters:
{Object} instanceConfig
  Configuration values for this specific instance.
{CKEDITOR.dom.element} element Optional
  The element linked to this instance.
{Number} mode Optional
  The mode in which the element is linked to this instance.

Field Detail
{Object} config
Since: 3.0
The configurations for this editor instance. It inherits all settings defined in (@link CKEDITOR.config}, combined with settings loaded from custom configuration files and those defined inline in the page when creating the editor.
Defined in: core/editor.js.

    var editor = CKEDITOR.instances.editor1;
    alert( editor.config.theme );  "default" e.g.

{CKEDITOR.dom.element} element
Since: 3.0
The DOM element that has been replaced by this editor instance. This element holds the editor data on load and post.
Defined in: core/editor.js.

    var editor = CKEDITOR.instances.editor1;
    alert( editor.element.getName() );  "textarea"

{Number} elementMode
Since: 3.0
The mode in which the #element is linked to this editor instance. It can be any of the following values:

- CKEDITOR.ELEMENT_MODE_NONE: No element is linked to the editor instance.
- CKEDITOR.ELEMENT_MODE_REPLACE: The element is to be replaced by the editor instance.
- CKEDITOR.ELEMENT_MODE_APPENDTO: The editor is to be created inside the element.

    var editor = CKEDITOR.replace( 'editor1' );
    alert( editor.elementMode );  "1"

{CKEDITOR.focusManager} focusManager
Since: 3.0
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.
Defined in: core/editor.js.

{CKEDITOR.keystrokeHandler} keystrokeHandler
Since: 3.0
Controls keystrokes typing in this editor instance.
Defined in: plugins/keystrokes/plugin.js.

{String} mode
Since: 3.0
The current editing mode. An editing mode is basically a viewport for editing or content viewing. By default the possible values for this property are "wysiwyg" and "source".
Defined in: plugins/editingblock/plugin.js.

    alert( CKEDITOR.instances.editor1.mode );  // "wysiwyg" (e.g.)

{String} name
Since: 3.0
The editor instance name. It hay be the replaced element id, name or a default name using a progressive counter (editor1, editor2, ...).
Defined in: core/editor.js.

    var editor = CKEDITOR.instances.editor1;
    alert( editor.name );  "editor1"

{CKEDITOR.ui} ui
Since: 3.0
Namespace containing UI features related to this editor instance.
Defined in: core/editor.js.
Method Detail
<static> {CKEDITOR.editor} CKEDITOR.editor.appendTo(elementOrId, config)
Since: 3.0
Creates a new editor instance inside a specific DOM element. Do not use this function directly. Use CKEDITOR.appendTo instead.

Parameters:
{Object|String} elementOrId
  The DOM element or its ID.
{Object} config Optional
  The specific configurations to apply to this editor instance. Configurations set here will override global CKEditor settings.

Returns:
  {CKEDITOR.editor} The editor instance created.

<static> {CKEDITOR.editor} CKEDITOR.editor.replace(elementOrIdOrName, config)
Since: 3.0
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. Do not use this function directly. Use CKEDITOR.replace instead.

Parameters:
{Object|String} elementOrIdOrName
  The DOM element (textarea), its ID or name.
{Object} config Optional
  The specific configurations to apply to this editor instance. Configurations set here will override global CKEditor settings.

Returns:
  {CKEDITOR.editor} The editor instance created.

{Undefined} addCommand(commandName, commandDefinition)
Since: 3.0
Adds a command definition to the editor instance. Commands added with this function can be later executed with #execCommand.
Defined in: core/editor.js.

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

Parameters:
{String} commandName
  The indentifier name of the command.
{CKEDITOR.commandDefinition} commandDefinition
  The command definition.

{Undefined} addCss(css)
Since: 3.0
Defined in: core/editor.js.

    NO EXAMPLE AVAILABLE

Parameters:
{Undefined} css

{Undefined} addMode(mode, modeEditor)
Since: 3.0
Registers an editing mode. This function is to be used mainly by plugins.
Defined in: plugins/editingblock/plugin.js.

Parameters:
{String} mode
  The mode name.
{Object} modeEditor
  The mode editor definition.

{Undefined} attachStyleStateChange(The, The)
Since: 3.0
Registers a function to be called whenever a style changes its state in the editing area. The current state is passed to the function. The possible states are CKEDITOR.TRISTATE_ON and CKEDITOR.TRISTATE_OFF.
Defined in: plugins/styles/plugin.js.

    // 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:
{CKEDITOR.style} The
  style to be watched.
{Function} The
  function to be called when the style state changes.

{Undefined} checkDirty()
Since: 3.0
Defined in: core/editor.js.

    NO EXAMPLE AVAILABLE

{Undefined} createFakeElement(realElement, className, realElementType, isResizable)
Since: 3.0
Defined in: plugins/fakeobjects/plugin.js.

    NO EXAMPLE AVAILABLE

Parameters:
{Undefined} realElement
{Undefined} className
{Undefined} realElementType
{Undefined} isResizable

{Undefined} createFakeParserElement(realElement, className, realElementType, isResizable)
Since: 3.0
Defined in: plugins/fakeobjects/plugin.js.

    NO EXAMPLE AVAILABLE

Parameters:
{Undefined} realElement
{Undefined} className
{Undefined} realElementType
{Undefined} isResizable

{Undefined} destroy(noUpdate)
Since: 3.0
Destroys the editor instance, releasing all resources used by it. If the editor replaced an element, the element will be recovered.
Defined in: core/editor.js.

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

Parameters:
{Boolean} noUpdate Optional
  If the instance is replacing a DOM element, this parameter indicates whether or not to update the element with the instance contents.

{Boolean} execCommand(commandName, data)
Since: 3.0
Executes a command.
Defined in: core/editor.js.

    editorInstance.execCommand( 'Bold' );

Parameters:
{String} commandName
  The indentifier name of the command.
{Object} data Optional
  Data to be passed to the command

Returns:
  {Boolean} "true" if the command has been successfuly executed, otherwise "false".

{Undefined} focus()
Since: 3.0
Moves the selection focus to the editing are space in the editor.
Defined in: plugins/editingblock/plugin.js.

    NO EXAMPLE AVAILABLE

{Undefined} forceNextSelectionCheck()
Since: 3.0
Defined in: plugins/selection/plugin.js.

    NO EXAMPLE AVAILABLE

{CKEDITOR.command} getCommand(commandName)
Since: 3.0
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 be then returned by this function.
Defined in: core/editor.js.

    NO EXAMPLE AVAILABLE

Parameters:
{String} commandName
  The name of the command to be returned. This is the same used to register the command with addCommand.

Returns:
  {CKEDITOR.command} The command object identified by the provided name.

{String} getData()
Since: 3.0
Gets the editor data. The data will be in raw format. It is the same data that is posted by the editor.
Defined in: core/editor.js.

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

Returns:
  {Undefined} (String) The editor data.

{CKEDITOR.dom.selection} getSelection()
Since: 3.0
Gets the current selection from the editing area when in WYSIWYG mode.
Defined in: plugins/selection/plugin.js.

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

Returns:
  {CKEDITOR.dom.selection} A selection object or null if not on WYSIWYG mode or no selection is available.

{Undefined} getSnapshot()
Since: 3.0
Defined in: core/editor.js.

    NO EXAMPLE AVAILABLE

{Undefined} insertElement(element)
Since: 3.0
Inserts an element into the currently selected position in the editor.
Defined in: core/editor.js.

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

Parameters:
{CKEDITOR.dom.element} element
  The element to be inserted into the editor.

{Undefined} insertHtml(data)
Since: 3.0
Inserts HTML into the currently selected position in the editor.
Defined in: core/editor.js.

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

Parameters:
{String} data
  HTML code to be inserted into the editor.

{Undefined} insertText(text)
Since: 3.0
Defined in: plugins/pastetext/plugin.js.

    NO EXAMPLE AVAILABLE

Parameters:
{Undefined} text

{Undefined} loadSnapshot(snapshot)
Since: 3.0
Defined in: core/editor.js.

    NO EXAMPLE AVAILABLE

Parameters:
{Undefined} snapshot

{CKEDITOR.dialog} openDialog(dialogName)
Since: 3.0
Loads and opens a registered dialog.
Defined in: plugins/dialog/plugin.js.

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

Parameters:
{String} dialogName
  The registered name of the dialog.

Returns:
  {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.

See:
  CKEDITOR.dialog.add

{Undefined} resetDirty()
Since: 3.0
Defined in: core/editor.js.

    NO EXAMPLE AVAILABLE

{Undefined} restoreRealElement(fakeElement)
Since: 3.0
Defined in: plugins/fakeobjects/plugin.js.

    NO EXAMPLE AVAILABLE

Parameters:
{Undefined} fakeElement

{Undefined} setData(data)
Since: 3.0
Sets the editor data. The data must be provided in raw format.
Defined in: core/editor.js.

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

Parameters:
{String} data
  HTML code to replace the curent content in the editor.

{Undefined} setMode(mode)
Since: 3.0
Sets the current editing mode in this editor instance.
Defined in: plugins/editingblock/plugin.js.

    // Switch to "source" view.
    CKEDITOR.instances.editor1.setMode( 'source' );

Parameters:
{String} mode
  A registered mode name.

{Undefined} updateElement()
Since: 3.0
Updates the <textarea> element that has been replaced by the editor with the current data available in the editor.
Defined in: core/editor.js.

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

Copyright © 2003-2009, CKSource - Frederico Knabben. All rights reserved.