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, data) Represents an editor instance.

Field Summary
Field Attributes	Field Name and Description
<static>	CKEDITOR.editor.dataProcessor If defined, points to the data processor which is responsible to translate and transform the editor data on input and output.
	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.
	updateUndo Update the undo stacks with any subsequent DOM changes after this call.

Method Summary
Method Attributes	Method Name and Description
<static>	CKEDITOR.editor.appendTo(elementOrId, config, data) 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) Add a trunk of css text to the editor which will be applied to the wysiwyg editing document.
	addMode(mode, modeEditor) Registers an editing mode.
	addRemoveFormatFilter(func) 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.
	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()
	getStylesSet(The) Gets the current styleSet for this instance
	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, callback) Loads and opens a registered dialog.
	resetDirty()
	restoreRealElement(fakeElement)
	setData(data, callback) 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, on, removeListener

Event Summary
Event Attributes	Event Name and Description
	blur(editor) Fired when the editor instance loses the input focus.
	dataReady() Fired when data is loaded and ready for retrieval in an editor instance.
	focus(editor) Fired when the editor instance receives the input focus.
	paste() Fired when a clipboard operation is about to be taken into the editor.
	saveSnapshot() Fired when the editor is about to save an undo snapshot.

Class Detail

CKEDITOR.editor(instanceConfig, element, mode, data)

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.
{String} data Optional: Since 3.3. Initial value for the instance.

Field Detail

<static> {CKEDITOR.dataProcessor} CKEDITOR.editor.dataProcessor

Since: 3.0

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.
Defined in: core/dataprocessor.js.

NO EXAMPLE AVAILABLE

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

{Undefined} updateUndo

Since: 3.0

Update the undo stacks with any subsequent DOM changes after this call.
Defined in: plugins/undo/plugin.js.

function()
{
editor.fire( 'updateSnapshot' );
...
 // Ask to include subsequent (in this call stack) DOM changes to be
// considered as part of the first snapshot.
	editor.fire( 'updateSnapshot' );
	editor.document.body.append(...);
...
}

Method Detail

<static> {CKEDITOR.editor} CKEDITOR.editor.appendTo(elementOrId, config, data)

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.
{String} data Optional: Since 3.3. Initial value for the instance.

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

Add a trunk of css text to the editor which will be applied to the wysiwyg editing document. Note: This function should be called before editor is loaded to take effect.
Defined in: core/editor.js.

editorInstance.addCss( 'body { background-color: grey; }' );

Parameters:
{Undefined} css: {String} CSS text.

{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} addRemoveFormatFilter(func)

Since: 3.3

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.
Defined in: plugins/removeformat/plugin.js.

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

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

{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} getStylesSet(The)

Since: 3.0

Gets the current styleSet for this instance
Defined in: plugins/styles/plugin.js.

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

Parameters:
{Function} The: function to be called with the styles data.

{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, callback)

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.
{Function} callback: The function to be invoked after dialog instance created.

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, callback)

Since: 3.0

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

Note that this menthod is asynchronous. The "callback" parameter must be used if interaction with the editor is needed after setting the data.
Defined in: core/editor.js.

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

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

Parameters:
{String} data: HTML code to replace the curent content in the editor.
{Function} callback: Function to be called after the setData is completed.

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

Event Detail

blur : <object>.on( 'blur', function( e ){ ... } )

Since: 3.0

Fired when the editor instance loses the input focus.
Defined in: focusmanager.js.

NO EXAMPLE AVAILABLE

Parameters:
{CKEDITOR.eventInfo} e: The standard event object passed to event listeners.
{CKEDITOR.editor} e.editor: The editor instance.

dataReady : <object>.on( 'dataReady', function( e ){ ... } )

Since: 3.0

Fired when data is loaded and ready for retrieval in an editor instance.
Defined in: plugin.js.

NO EXAMPLE AVAILABLE

Parameters:
{CKEDITOR.eventInfo} e: The standard event object passed to event listeners.

focus : <object>.on( 'focus', function( e ){ ... } )

Since: 3.0

Fired when the editor instance receives the input focus.
Defined in: focusmanager.js.

NO EXAMPLE AVAILABLE

Parameters:
{CKEDITOR.eventInfo} e: The standard event object passed to event listeners.
{CKEDITOR.editor} e.editor: The editor instance.

paste : <object>.on( 'paste', function( e ){ ... } )

Since: 3.1

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.
Defined in: plugin.js.

NO EXAMPLE AVAILABLE

Parameters:
{CKEDITOR.eventInfo} e: The standard event object passed to event listeners.
{String} e.data.html Optional: The HTML data to be pasted. If not available, e.data.text will be defined.
{String} e.data.text Optional: The plain text data to be pasted, available when plain text operations are to used. If not available, e.data.html will be defined.

saveSnapshot : <object>.on( 'saveSnapshot', function( e ){ ... } )

Since: 3.0

Fired when the editor is about to save an undo snapshot. This event can be fired by plugins and customizations to make the editor saving undo snapshots.
Defined in: plugin.js.

NO EXAMPLE AVAILABLE

Parameters:
{CKEDITOR.eventInfo} e: The standard event object passed to event listeners.

CKEditor 3 JavaScript API Documentation

Namespaces

Classes

Class CKEDITOR.editor