Class CKEDITOR.editor
Represents an editor instance.
Extends
CKEDITOR.event.
Defined in: core/editor_basic.js.
Constructor Attributes | Constructor Name and Description |
---|---|
CKEDITOR.editor(instanceConfig, element, mode, data)
Creates an editor class instance.
|
Field Attributes | Field Name and Description |
---|---|
Registers an item group to the editor context menu in order to make it
possible to associate it with menu items later.
|
|
Adds an item from the specified definition to the editor context menu.
|
|
Adds one or more items from the specified definition array to the editor context menu.
|
|
The configurations for this editor instance.
|
|
The DOM element that holds the main editor interface.
|
|
If defined, points to the data processor which is responsible to translate
and transform the editor data on input and output.
|
|
The DOM element that was replaced by this editor instance.
|
|
The mode in which the #element is linked to this editor
instance.
|
|
Controls the focus state of this editor instance.
|
|
Retrieves a particular menu item definition from the editor context menu.
|
|
A unique random string assigned to each editor instance on the page.
|
|
Controls keystrokes typing in this editor instance.
|
|
An object that contains all language strings used by the editor
interface.
|
|
The code for the language resources that have been loaded
for the user interface elements of this editor instance.
|
|
The current editing mode.
|
|
The editor instance name.
|
|
An object that contains references to all plugins used by this
editor instance.
|
|
Indicates the read-only state of this editor.
|
|
Removes a particular menu item added before from the editor context menu.
|
|
The CSS class name used for skin identification purposes.
|
|
The name of the skin used by this editor instance.
|
|
The full URL of the skin directory.
|
|
The tabbing
navigation order that has been calculated for this editor
instance.
|
|
The theme used by this editor instance.
|
|
The namespace containing UI features related to this editor instance.
|
|
Amend the top of undo stack (last undo image) with the current DOM changes.
|
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)
Adds a piece of CSS code 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(style, callback)
Registers a function to be called whenever the selection position changes in the
editing area.
|
|
Checks whether the current editor contents contain changes when
compared to the contents loaded into the editor at startup, or to
the contents available in the editor when
#resetDirty
was called. |
|
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 associated with the editor.
|
|
focus()
Moves the selection focus to the editing are space in the editor.
|
|
getCommand(commandName)
Gets one of the registered commands.
|
|
getData()
Gets the editor data.
|
|
getMode(mode)
Gets the current or any of the objects that represent the editing
area modes.
|
|
getResizable(forContents)
Gets the element that can be freely used to check the editor size.
|
|
Gets the current selection from the editing area when in WYSIWYG mode.
|
|
Gets the "raw data" currently available in the editor.
|
|
getStylesSet(callback)
Gets the current styleSet for this instance
|
|
getThemeSpace(spaceName)
Returns the DOM element that represents a theme space.
|
|
insertElement(element)
Inserts an element into the currently selected position in the
editor in WYSIWYG mode.
|
|
insertHtml(data)
Inserts HTML code into the currently selected position in the editor in WYSIWYG mode.
|
|
insertText(text)
Insert text content into the currently selected position in the
editor in WYSIWYG mode.
|
|
loadSnapshot(snapshot)
Loads "raw data" into the editor.
|
|
openDialog(dialogName, callback)
Loads and opens a registered dialog.
|
|
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. |
|
resize(width, height, isContentHeight, resizeInner)
Resizes the editor interface.
|
|
restoreRealElement(fakeElement)
|
|
setData(data, callback, internal)
Sets the editor data.
|
|
setMode(mode)
Sets the current editing mode in this editor instance.
|
|
setReadOnly(isReadOnly)
Puts or restores the editor into read-only state.
|
|
Updates the
<textarea> element that was replaced by the editor with
the current data available in the editor. |
- Methods borrowed from class CKEDITOR.event:
- fire, fireOnce, hasListeners, on, removeListener
Event Attributes | Event Name and Description |
---|---|
Fired after the command execution when
#execCommand is called. |
|
Event fired at the end of the
#setData call execution. |
|
Fired after an undo image is taken.
|
|
Fired when some elements are added to the document
|
|
Fired when the AutoGrow plugin is about to change the size of the editor.
|
|
Fired before the command execution when
#execCommand is called. |
|
Internal event to get the current data.
|
|
Fired before changing the editing mode.
|
|
Fired before the editor mode is set.
|
|
Fired before an undo image is to be taken.
|
|
Fired when the editor instance loses the input focus.
|
|
Fired once the editor configuration is ready (loaded and processed).
|
|
Fired when the language direction in the specific cursor position is changed
|
|
Fired when the custom configuration file is loaded, before the final
configurations initialization.
|
|
Fired when data is loaded and ready for retrieval in an editor instance.
|
|
Fired when this editor instance is destroyed.
|
|
Fired when a dialog is hidden
|
|
Fired when a dialog is shown
|
|
Fired when the language direction of an element is changed
|
|
Fired when the contents of the elementsPath are changed
|
|
Fired when the editor instance receives the input focus.
|
|
Event fired before the
#getData call returns allowing additional manipulation. |
|
Internal event to perform the
#getSnapshot call. |
|
Internal event to perform the
#insertElement call |
|
Internal event to perform the
#insertHtml call |
|
Internal event to perform the
#insertText call |
|
Fired when the CKEDITOR instance is created, fully initialized and ready for interaction.
|
|
Fired when any keyboard key (or combination) is pressed into the editing area.
|
|
Fired when the language is loaded into the editor instance.
|
|
Internal event to perform the
#loadSnapshot call. |
|
Fired after setting the editing mode.
|
|
Fired when a clipboard operation is about to be taken into the editor.
|
|
Internal event to open the Paste dialog
|
|
Fired when all plugins are loaded and initialized into the editor instance.
|
|
Event fired after the
CKEDITOR.editor#readOnly property changes. |
|
Fired after an element was cleaned by the removeFormat plugin.
|
|
Fired after the editor instance is resized through
the CKEDITOR.editor.prototype.resize method.
|
|
Fired when the editor is about to save an undo snapshot.
|
|
Event fired before the
#setData call is executed allowing additional manipulation. |
Class Detail
CKEDITOR.editor(instanceConfig, element, mode, data)
Since:
3.0
Creates an editor class instance. This constructor should be rarely
used, in favor of the CKEDITOR editor creation functions.
- 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. See #elementMode.
- {String} data Optional
- Since 3.3. Initial value for the instance.
Field Detail
{Undefined}
addMenuGroup
Since:
3.0
Registers an item group to the editor context menu in order to make it
possible to associate it with menu items later.
Defined in: plugins/menu/plugin.js.
Defined in: plugins/menu/plugin.js.
NO EXAMPLE AVAILABLE
{Undefined}
addMenuItem
Since:
3.0
Adds an item from the specified definition to the editor context menu.
Defined in: plugins/menu/plugin.js.
Defined in: plugins/menu/plugin.js.
NO EXAMPLE AVAILABLE
{Undefined}
addMenuItems
Since:
3.0
Adds one or more items from the specified definition array to the editor context menu.
Defined in: plugins/menu/plugin.js.
Defined in: plugins/menu/plugin.js.
NO EXAMPLE AVAILABLE
{Object}
config
Since:
3.0
The configurations for this editor instance. It inherits all
settings defined in
Defined in: core/editor.js.
(@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 ); // E.g. "default"
{CKEDITOR.dom.element}
container
Since:
3.0
The DOM element that holds the main editor interface.
Defined in: themes/default/theme.js.
Defined in: themes/default/theme.js.
var editor = CKEDITOR.instances.editor1; alert( editor.container.getName() ); "span"
{CKEDITOR.dataProcessor}
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.
Defined in: core/dataprocessor.js.
NO EXAMPLE AVAILABLE
{CKEDITOR.dom.element}
element
Since:
3.0
The DOM element that was replaced by this editor instance. This
element stores the editor data on load and post.
Defined in: core/editor.js.
Defined in: core/editor.js.
var editor = CKEDITOR.instances.editor1; alert( editor.element.getName() ); // E.g. "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
intended for developers adding UI elements to the editor interface.
Defined in: core/editor.js.
Defined in: core/editor.js.
{CKEDITOR.menu.definition}
getMenuItem
Since:
3.0
Retrieves a particular menu item definition from the editor context menu.
Defined in: plugins/menu/plugin.js.
Defined in: plugins/menu/plugin.js.
NO EXAMPLE AVAILABLE
{String}
id
Since:
3.0
A unique random string assigned to each editor instance on the page.
Defined in: core/editor.js.
Defined in: core/editor.js.
NO EXAMPLE AVAILABLE
{CKEDITOR.keystrokeHandler}
keystrokeHandler
Since:
3.0
Controls keystrokes typing in this editor instance.
Defined in: plugins/keystrokes/plugin.js.
Defined in: plugins/keystrokes/plugin.js.
{CKEDITOR.lang}
lang
Since:
3.0
An object that contains all language strings used by the editor
interface.
Defined in: core/editor.js.
Defined in: core/editor.js.
alert( editor.lang.bold ); // E.g. "Negrito" (if the language is set to Portuguese)
{String}
langCode
Since:
3.0
The code for the language resources that have been loaded
for the user interface elements of this editor instance.
Defined in: core/editor.js.
Defined in: core/editor.js.
alert( editor.langCode ); // E.g. "en"
{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.
Defined in: plugins/editingblock/plugin.js.
alert( CKEDITOR.instances.editor1.mode ); // "wysiwyg" (e.g.)
{String}
name
Since:
3.0
The editor instance name. It may be the replaced element ID, name, or
a default name using the progressive counter (
Defined in: core/editor.js.
editor1
,
editor2
, ...).
Defined in: core/editor.js.
var editor = CKEDITOR.instances.editor1; alert( editor.name ); // "editor1"
{Object}
plugins
Since:
3.0
An object that contains references to all plugins used by this
editor instance.
Defined in: core/editor.js.
Defined in: core/editor.js.
alert( editor.plugins.dialog.path ); // E.g. "http://example.com/ckeditor/plugins/dialog/"
{Boolean}
readOnly
Since:
3.6
Indicates the read-only state of this editor. This is a read-only property.
Defined in: core/editor.js.
Defined in: core/editor.js.
NO EXAMPLE AVAILABLE
{Undefined}
removeMenuItem
Since:
3.6.1
Removes a particular menu item added before from the editor context menu.
Defined in: plugins/menu/plugin.js.
Defined in: plugins/menu/plugin.js.
NO EXAMPLE AVAILABLE
{String}
skinClass
Since:
3.0
The CSS class name used for skin identification purposes.
Defined in: core/editor.js.
Defined in: core/editor.js.
alert( editor.skinClass ); // E.g. "cke_skin_kama"
{String}
skinName
Since:
3.0
The name of the skin used by this editor instance. The skin name can
be set through the
Defined in: core/editor.js.
CKEDITOR.config.skin
setting.
Defined in: core/editor.js.
alert( editor.skinName ); // E.g. "kama"
{String}
skinPath
Since:
3.0
The full URL of the skin directory.
Defined in: core/editor.js.
Defined in: core/editor.js.
alert( editor.skinPath ); // E.g. "http://example.com/ckeditor/skins/kama/"
{Number}
tabIndex
Since:
3.0
The tabbing
navigation order that has been calculated for this editor
instance. This can be set by the
Defined in: core/editor.js.
CKEDITOR.config.tabIndex
setting or taken from the tabindex
attribute of the
#element
associated with the editor.
Defined in: core/editor.js.
alert( editor.tabIndex ); // E.g. "0"
- Default Value:
- 0 (zero)
{CKEDITOR.theme}
theme
Since:
3.0
The theme used by this editor instance.
Defined in: core/editor.js.
Defined in: core/editor.js.
alert( editor.theme ); // E.g. "http://example.com/ckeditor/themes/default/"
{CKEDITOR.ui}
ui
Since:
3.0
The namespace containing UI features related to this editor instance.
Defined in: core/editor.js.
Defined in: core/editor.js.
{Undefined}
updateUndo
Since:
3.0
Amend the top of undo stack (last undo image) with the current DOM changes.
Defined in: plugins/undo/plugin.js.
Defined in: plugins/undo/plugin.js.
function() { editor.fire( 'saveSnapshot' ); editor.document.body.append(...); // Make new changes following the last undo snapshot part of it. editor.fire( 'updateSnapshot' ); ... }
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 executed later with the
Defined in: core/editor.js.
#execCommand
method.
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
Adds a piece of CSS code to the editor which will be applied to the WYSIWYG editing document.
This CSS would not be added to the output, and is there mainly for editor-specific editing requirements.
Note: This function should be called before the editor is loaded to take effect.
Defined in: core/editor.js.
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.
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.
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(style, callback)
Since:
3.0
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.
Defined in: plugins/styles/plugin.js.
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} style
- The style to be watched.
- {Function} callback
- The function to be called.
{Boolean}
checkDirty()
Since:
3.0
Checks whether the current editor contents contain changes when
compared to the contents loaded into the editor at startup, or to
the contents available in the editor when
Defined in: core/editor.js.
#resetDirty
was called.
Defined in: core/editor.js.
function beforeUnload( e ) { if ( CKEDITOR.instances.editor1.checkDirty() ) return e.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" is the contents contain changes.
{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.
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 associated with the editor.
Defined in: core/editor.js.
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 was executed successfully, otherwisefalse
.
- See:
- CKEDITOR.editor.addCommand
{Undefined}
focus()
Since:
3.0
Moves the selection focus to the editing are space in the editor.
Defined in: plugins/editingblock/plugin.js.
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
Defined in: core/editor.js.
#addCommand
, it is
transformed internally into an instance of
CKEDITOR.command
, which will then be 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 name that is 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.
Defined in: core/editor.js.
if ( CKEDITOR.instances.editor1.getData() == '' ) alert( 'There is no data available' );
- Returns:
- {Undefined} (String) The editor data.
{Undefined}
getMode(mode)
Since:
3.0
Gets the current or any of the objects that represent the editing
area modes. The two most common editing modes are "wysiwyg" and "source".
Defined in: plugins/editingblock/plugin.js.
Defined in: plugins/editingblock/plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {String} mode Optional
- The mode to be retrieved. If not specified, the current one is returned.
{CKEDITOR.dom.element}
getResizable(forContents)
Since:
3.0
Gets the element that can be freely 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.
Defined in: themes/default/theme.js.
Defined in: themes/default/theme.js.
- Parameters:
- {Boolean} forContents
- Whether to return the "contents" part of the theme instead of the container.
- Returns:
- {CKEDITOR.dom.element} The resizable element.
{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.
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 in WYSIWYG mode or no selection is available.
{Undefined}
getSnapshot()
Since:
3.0
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
Defined in: core/editor.js.
#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.
Defined in: core/editor.js.
alert( editor.getSnapshot() );
- See:
- CKEDITOR.editor.getData
{Undefined}
getStylesSet(callback)
Since:
3.0
Gets the current styleSet for this instance
Defined in: plugins/styles/plugin.js.
Defined in: plugins/styles/plugin.js.
editor.getStylesSet( function( stylesDefinitions ) {} );
- Parameters:
- {Function} callback
- The function to be called with the styles data.
{CKEDITOR.dom.element}
getThemeSpace(spaceName)
Since:
3.0
Returns the DOM element that represents a theme space. The default theme defines
three spaces, namely "top", "contents" and "bottom", representing the main
blocks that compose the editor interface.
Defined in: themes/default/theme.js.
Defined in: themes/default/theme.js.
// Hide the bottom space in the UI. var bottom = editor.getThemeSpace( 'bottom' ); bottom.setStyle( 'display', 'none' );
- Parameters:
- {String} spaceName
- The space name.
- Returns:
- {CKEDITOR.dom.element} The element that represents the space.
{Undefined}
insertElement(element)
Since:
3.0
Inserts an element into the currently selected position in the
editor in WYSIWYG mode.
Defined in: core/editor.js.
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 code into the currently selected position in the editor in WYSIWYG mode.
Defined in: core/editor.js.
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.5
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.
Note: two subsequent line-breaks will introduce one paragraph. This depends on
Defined in: core/editor.js.
CKEDITOR.config.enterMode
;
A single line-break will be instead translated into one <br />.
Defined in: core/editor.js.
CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' );
- Parameters:
- {String} text
- Text to be inserted into the editor.
{Undefined}
loadSnapshot(snapshot)
Since:
3.0
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
Defined in: core/editor.js.
#getSnapshot
produced data.
Defined in: core/editor.js.
var data = editor.getSnapshot(); editor.loadSnapshot( data );
- Parameters:
- {Undefined} snapshot
- See:
- CKEDITOR.editor.setData
{CKEDITOR.dialog}
openDialog(dialogName, callback)
Since:
3.0
Loads and opens a registered dialog.
Defined in: plugins/dialog/plugin.js.
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
Resets the "dirty state" of the editor so subsequent calls to
Defined in: core/editor.js.
#checkDirty
will return false
if the user will not
have made further changes to the contents.
Defined in: core/editor.js.
alert( editor.checkDirty() ); // E.g. "true" editor.resetDirty(); alert( editor.checkDirty() ); // "false"
{Undefined}
resize(width, height, isContentHeight, resizeInner)
Since:
3.0
Resizes the editor interface.
Defined in: themes/default/theme.js.
Defined in: themes/default/theme.js.
editor.resize( 900, 300 );
editor.resize( '100%', 450, true );
- Parameters:
- {Number|String} width
- The new width. It can be an pixels integer or a CSS size value.
- {Number|String} height
- The new height. It can be an pixels integer or a CSS size value.
- {Boolean} isContentHeight Optional
- Indicates that the provided height is to be applied to the editor contents space, not to the entire editor interface. Defaults to false.
- {Boolean} resizeInner Optional
- Indicates that the first inner interface element must receive the size, not the outer element. The default theme defines the interface inside a pair of span elements (<span><span>...</span></span>). By default the first span element receives the sizes. If this parameter is set to true, the second span is sized instead.
{Undefined}
restoreRealElement(fakeElement)
Since:
3.0
Defined in: plugins/fakeobjects/plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {Undefined} fakeElement
{Undefined}
setData(data, callback, internal)
Since:
3.0
Sets the editor data. The data must be provided in the raw format (HTML).
Note that this method is asynchronous. The
Defined in: core/editor.js.
Note that this method 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. - {Boolean} internal
- Whether to suppress any event firing when copying data internally inside the editor.
{Undefined}
setMode(mode)
Since:
3.0
Sets the current editing mode in this editor instance.
Defined in: plugins/editingblock/plugin.js.
Defined in: plugins/editingblock/plugin.js.
// Switch to "source" view. CKEDITOR.instances.editor1.setMode( 'source' );
- Parameters:
- {String} mode
- A registered mode name.
{Undefined}
setReadOnly(isReadOnly)
Since:
3.6
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
Note: the current editing area will be reloaded.
Defined in: core/editor.js.
CKEDITOR.config.readOnly
property of the editor, firing the CKEDITOR.editor#readOnly
event.Note: the current editing area will be reloaded.
Defined in: core/editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {Boolean} isReadOnly Optional
- Indicates that the editor must go
read-only (
true
, default) or be restored and made editable (false
).
{Undefined}
updateElement()
Since:
3.0
Updates the
Defined in: core/editor.js.
<textarea>
element that was 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.
- See:
- CKEDITOR.editor.element
Event Detail
afterCommandExec : <object>.on( 'afterCommandExec', function( e ){ ... } )
Since:
3.0
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {String} e.data.name
- The command name.
- {Object} e.data.commandData
- The data sent to the command.
- {CKEDITOR.command} e.data.command
- The command itself.
- {Object} e.data.returnValue
- The value returned by the command execution.
afterSetData : <object>.on( 'afterSetData', function( e ){ ... } )
Since:
3.0
Event fired at the end of the
Defined in: editor.js.
#setData
call execution. Usually it is better to use the
CKEDITOR.editor.prototype.dataReady
event.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {String} e.data.dataValue
- The data that has been set.
afterUndoImage : <object>.on( 'afterUndoImage', function( e ){ ... } )
Since:
3.5.3
Fired after an undo image is taken. An undo image represents the
editor state at some point. It's saved into an undo store, so the editor is
able to recover the editor state on undo and redo operations.
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- See:
- CKEDITOR.editor#beforeUndoImage
ariaWidget : <object>.on( 'ariaWidget', function( e ){ ... } )
Since:
3.0
Fired when some elements are added to the document
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {Object} e.element
- The element being added
autogrow : <object>.on( 'autogrow', function( e ){ ... } )
Since:
3.0
Fired when the AutoGrow plugin is about to change the size of the editor.
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {Number} e.data.currentHeight
- The current height of the editor (before resizing).
- {Number} e.data.newHeight
- The new height of the editor (after resizing). It can be changed to determine a different height value to be used instead.
beforeCommandExec : <object>.on( 'beforeCommandExec', function( e ){ ... } )
Since:
3.0
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {String} e.data.name
- The command name.
- {Object} e.data.commandData
- The data to be sent to the command. This can be manipulated by the event listener.
- {CKEDITOR.command} e.data.command
- The command itself.
beforeGetData : <object>.on( 'beforeGetData', function( e ){ ... } )
Since:
3.0
Internal event to get the current data.
Defined in: editor.js.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
beforeModeUnload : <object>.on( 'beforeModeUnload', function( e ){ ... } )
Since:
3.0
Fired before changing the editing mode. See also CKEDITOR.editor#beforeSetMode and CKEDITOR.editor#mode
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
beforeSetMode : <object>.on( 'beforeSetMode', function( e ){ ... } )
Since:
3.5.3
Fired before the editor mode is set. See also CKEDITOR.editor#mode and CKEDITOR.editor#beforeModeUnload
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {String} e.newMode
- The name of the mode which is about to be set.
beforeUndoImage : <object>.on( 'beforeUndoImage', function( e ){ ... } )
Since:
3.5.3
Fired before an undo image is to be taken. An undo image represents the
editor state at some point. It's saved into an undo store, so the editor is
able to recover the editor state on undo and redo operations.
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- See:
- CKEDITOR.editor#afterUndoImage
blur : <object>.on( 'blur', function( e ){ ... } )
Since:
3.0
Fired when the editor instance loses the input focus.
Defined in: focusmanager.js.
Defined in: focusmanager.js.
editor.on( 'blur', function( e ) { alert( 'The editor named ' + e.editor.name + ' lost the focus' ); });
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- The editor instance.
configLoaded : <object>.on( 'configLoaded', function( e ){ ... } )
Since:
3.0
Fired once the editor configuration is ready (loaded and processed).
Defined in: editor.js.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
contentDirChanged : <object>.on( 'contentDirChanged', function( e ){ ... } )
Since:
3.0
Fired when the language direction in the specific cursor position is changed
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {String} e.eventData
- The direction in the current position.
customConfigLoaded : <object>.on( 'customConfigLoaded', function( e ){ ... } )
Since:
3.0
Fired when the custom configuration file is loaded, before the final
configurations initialization.
Custom configuration files can be loaded thorugh the
Defined in: editor.js.
Custom configuration files can be loaded thorugh the
CKEDITOR.config.customConfig
setting. Several files can be loaded
by changing this setting.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This 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.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
destroy : <object>.on( 'destroy', function( e ){ ... } )
Since:
3.0
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.
Defined in: editor.js.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
dialogHide : <object>.on( 'dialogHide', function( e ){ ... } )
Since:
3.0
Fired when a dialog is hidden
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
dialogShow : <object>.on( 'dialogShow', function( e ){ ... } )
Since:
3.0
Fired when a dialog is shown
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
dirChanged : <object>.on( 'dirChanged', function( e ){ ... } )
Since:
3.0
Fired when the language direction of an element is changed
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {Object} e.eventData.node
- The element that is being changed.
- {String} e.eventData.dir
- The new direction.
elementsPathUpdate : <object>.on( 'elementsPathUpdate', function( e ){ ... } )
Since:
3.0
Fired when the contents of the elementsPath are changed
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {Object} e.eventData.space
- The elementsPath container
focus : <object>.on( 'focus', function( e ){ ... } )
Since:
3.0
Fired when the editor instance receives the input focus.
Defined in: focusmanager.js.
Defined in: focusmanager.js.
editor.on( 'focus', function( e ) { alert( 'The editor named ' + e.editor.name + ' is now focused' ); });
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- The editor instance.
getData : <object>.on( 'getData', function( e ){ ... } )
Since:
3.0
Event fired before the
Defined in: editor.js.
#getData
call returns allowing additional manipulation.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {String} e.data.dataValue
- The data that will be returned.
getSnapshot : <object>.on( 'getSnapshot', function( e ){ ... } )
Since:
3.0
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
insertElement : <object>.on( 'insertElement', function( e ){ ... } )
Since:
3.0
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {Object} e.element
- The element to insert.
insertHtml : <object>.on( 'insertHtml', function( e ){ ... } )
Since:
3.0
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {String} e.data
- The HTML to insert.
insertText : <object>.on( 'insertText', function( e ){ ... } )
Since:
3.0
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {String} e.text
- The text to insert.
instanceReady : <object>.on( 'instanceReady', function( e ){ ... } )
Since:
3.0
Fired when the CKEDITOR instance is created, fully initialized and ready for interaction.
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
key : <object>.on( 'key', function( e ){ ... } )
Since:
3.0
Fired when any keyboard key (or combination) is pressed into the editing area.
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {Number} e.data.keyCode
- A number representing the key code (or combination). It is the sum of the current key code and the CKEDITOR.CTRL, CKEDITOR.SHIFT and CKEDITOR.ALT constants, if those are pressed.
langLoaded : <object>.on( 'langLoaded', function( e ){ ... } )
Since:
3.6.1
Fired when the language is loaded into the editor instance.
Defined in: editor.js.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
loadSnapshot : <object>.on( 'loadSnapshot', function( e ){ ... } )
Since:
3.0
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
mode : <object>.on( 'mode', function( e ){ ... } )
Since:
3.0
Fired after setting the editing mode. See also CKEDITOR.editor#beforeSetMode and CKEDITOR.editor#beforeModeUnload
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {String} e.previousMode
- The previous mode of the editor.
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.
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.
pasteDialog : <object>.on( 'pasteDialog', function( e ){ ... } )
Since:
3.0
Internal event to open the Paste dialog
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
pluginsLoaded : <object>.on( 'pluginsLoaded', function( e ){ ... } )
Since:
3.0
Fired when all plugins are loaded and initialized into the editor instance.
Defined in: editor.js.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
readOnly : <object>.on( 'readOnly', function( e ){ ... } )
Since:
3.6
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
removeFormatCleanup : <object>.on( 'removeFormatCleanup', function( e ){ ... } )
Since:
3.0
Fired after an element was cleaned by the removeFormat plugin.
Defined in: plugin.js.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {Object} e.data.element
- The element that was cleaned up.
resize : <object>.on( 'resize', function( e ){ ... } )
Since:
3.0
Fired after the editor instance is resized through
the CKEDITOR.editor.prototype.resize method.
Defined in: theme.js.
Defined in: theme.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
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.
Defined in: plugin.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
setData : <object>.on( 'setData', function( e ){ ... } )
Since:
3.0
Event fired before the
Defined in: editor.js.
#setData
call is executed allowing additional manipulation.
Defined in: editor.js.
NO EXAMPLE AVAILABLE
- Parameters:
- {CKEDITOR.eventInfo} e
- The standard event object passed to event listeners.
- {CKEDITOR.editor} e.editor
- This editor instance.
- {String} e.data.dataValue
- The data that will be used.