2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
7 * @fileOverview Defines the {@link CKEDITOR.editor} class, which represents an
\r
13 // The counter for automatic instance names.
\r
14 var nameCounter = 0;
\r
16 var getNewName = function()
\r
18 var name = 'editor' + ( ++nameCounter );
\r
19 return ( CKEDITOR.instances && CKEDITOR.instances[ name ] ) ? getNewName() : name;
\r
22 // ##### START: Config Privates
\r
24 // These function loads custom configuration files and cache the
\r
25 // CKEDITOR.editorConfig functions defined on them, so there is no need to
\r
26 // download them more than once for several instances.
\r
27 var loadConfigLoaded = {};
\r
28 var loadConfig = function( editor )
\r
30 var customConfig = editor.config.customConfig;
\r
32 // Check if there is a custom config to load.
\r
33 if ( !customConfig )
\r
36 var loadedConfig = loadConfigLoaded[ customConfig ] || ( loadConfigLoaded[ customConfig ] = {} );
\r
38 // If the custom config has already been downloaded, reuse it.
\r
39 if ( loadedConfig.fn )
\r
41 // Call the cached CKEDITOR.editorConfig defined in the custom
\r
42 // config file for the editor instance depending on it.
\r
43 loadedConfig.fn.call( editor, editor.config );
\r
45 // If there is no other customConfig in the chain, fire the
\r
46 // "configLoaded" event.
\r
47 if ( editor.config.customConfig == customConfig || !loadConfig( editor ) )
\r
48 editor.fireOnce( 'customConfigLoaded' );
\r
52 // Load the custom configuration file.
\r
53 CKEDITOR.scriptLoader.load( customConfig, function()
\r
55 // If the CKEDITOR.editorConfig function has been properly
\r
56 // defined in the custom configuration file, cache it.
\r
57 if ( CKEDITOR.editorConfig )
\r
58 loadedConfig.fn = CKEDITOR.editorConfig;
\r
60 loadedConfig.fn = function(){};
\r
62 // Call the load config again. This time the custom
\r
63 // config is already cached and so it will get loaded.
\r
64 loadConfig( editor );
\r
71 var initConfig = function( editor, instanceConfig )
\r
73 // Setup the lister for the "customConfigLoaded" event.
\r
74 editor.on( 'customConfigLoaded', function()
\r
76 if ( instanceConfig )
\r
78 // Register the events that may have been set at the instance
\r
79 // configuration object.
\r
80 if ( instanceConfig.on )
\r
82 for ( var eventName in instanceConfig.on )
\r
84 editor.on( eventName, instanceConfig.on[ eventName ] );
\r
88 // Overwrite the settings from the in-page config.
\r
89 CKEDITOR.tools.extend( editor.config, instanceConfig, true );
\r
91 delete editor.config.on;
\r
94 onConfigLoaded( editor );
\r
97 // The instance config may override the customConfig setting to avoid
\r
98 // loading the default ~/config.js file.
\r
99 if ( instanceConfig && instanceConfig.customConfig != undefined )
\r
100 editor.config.customConfig = instanceConfig.customConfig;
\r
102 // Load configs from the custom configuration files.
\r
103 if ( !loadConfig( editor ) )
\r
104 editor.fireOnce( 'customConfigLoaded' );
\r
107 // ##### END: Config Privates
\r
109 var onConfigLoaded = function( editor )
\r
111 // Set config related properties.
\r
113 var skin = editor.config.skin.split( ',' ),
\r
114 skinName = skin[ 0 ],
\r
115 skinPath = CKEDITOR.getUrl( skin[ 1 ] || (
\r
116 'skins/' + skinName + '/' ) );
\r
118 editor.skinName = skinName;
\r
119 editor.skinPath = skinPath;
\r
120 editor.skinClass = 'cke_skin_' + skinName;
\r
122 // Fire the "configLoaded" event.
\r
123 editor.fireOnce( 'configLoaded' );
\r
125 // Load language file.
\r
126 loadLang( editor );
\r
129 var loadLang = function( editor )
\r
131 CKEDITOR.lang.load( editor.config.language, editor.config.defaultLanguage, function( languageCode, lang )
\r
133 editor.langCode = languageCode;
\r
135 // As we'll be adding plugin specific entries that could come
\r
136 // from different language code files, we need a copy of lang,
\r
137 // not a direct reference to it.
\r
138 editor.lang = CKEDITOR.tools.prototypedCopy( lang );
\r
140 // We're not able to support RTL in Firefox 2 at this time.
\r
141 if ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 && editor.lang.dir == 'rtl' )
\r
142 editor.lang.dir = 'ltr';
\r
144 loadPlugins( editor );
\r
148 var loadPlugins = function( editor )
\r
150 var config = editor.config,
\r
151 plugins = config.plugins,
\r
152 extraPlugins = config.extraPlugins,
\r
153 removePlugins = config.removePlugins;
\r
155 if ( extraPlugins )
\r
157 // Remove them first to avoid duplications.
\r
158 var removeRegex = new RegExp( '(?:^|,)(?:' + extraPlugins.replace( /\s*,\s*/g, '|' ) + ')(?=,|$)' , 'g' );
\r
159 plugins = plugins.replace( removeRegex, '' );
\r
161 plugins += ',' + extraPlugins;
\r
164 if ( removePlugins )
\r
166 removeRegex = new RegExp( '(?:^|,)(?:' + removePlugins.replace( /\s*,\s*/g, '|' ) + ')(?=,|$)' , 'g' );
\r
167 plugins = plugins.replace( removeRegex, '' );
\r
170 // Load all plugins defined in the "plugins" setting.
\r
171 CKEDITOR.plugins.load( plugins.split( ',' ), function( plugins )
\r
173 // The list of plugins.
\r
174 var pluginsArray = [];
\r
176 // The language code to get loaded for each plugin. Null
\r
177 // entries will be appended for plugins with no language files.
\r
178 var languageCodes = [];
\r
180 // The list of URLs to language files.
\r
181 var languageFiles = [];
\r
183 // Cache the loaded plugin names.
\r
184 editor.plugins = plugins;
\r
186 // Loop through all plugins, to build the list of language
\r
187 // files to get loaded.
\r
188 for ( var pluginName in plugins )
\r
190 var plugin = plugins[ pluginName ],
\r
191 pluginLangs = plugin.lang,
\r
192 pluginPath = CKEDITOR.plugins.getPath( pluginName ),
\r
195 // Set the plugin path in the plugin.
\r
196 plugin.path = pluginPath;
\r
198 // If the plugin has "lang".
\r
201 // Resolve the plugin language. If the current language
\r
202 // is not available, get the first one (default one).
\r
203 lang = ( CKEDITOR.tools.indexOf( pluginLangs, editor.langCode ) >= 0 ? editor.langCode : pluginLangs[ 0 ] );
\r
205 if ( !plugin.lang[ lang ] )
\r
207 // Put the language file URL into the list of files to
\r
209 languageFiles.push( CKEDITOR.getUrl( pluginPath + 'lang/' + lang + '.js' ) );
\r
213 CKEDITOR.tools.extend( editor.lang, plugin.lang[ lang ] );
\r
218 // Save the language code, so we know later which
\r
219 // language has been resolved to this plugin.
\r
220 languageCodes.push( lang );
\r
222 pluginsArray.push( plugin );
\r
225 // Load all plugin specific language files in a row.
\r
226 CKEDITOR.scriptLoader.load( languageFiles, function()
\r
228 // Initialize all plugins that have the "beforeInit" and "init" methods defined.
\r
229 var methods = [ 'beforeInit', 'init', 'afterInit' ];
\r
230 for ( var m = 0 ; m < methods.length ; m++ )
\r
232 for ( var i = 0 ; i < pluginsArray.length ; i++ )
\r
234 var plugin = pluginsArray[ i ];
\r
236 // Uses the first loop to update the language entries also.
\r
237 if ( m === 0 && languageCodes[ i ] && plugin.lang )
\r
238 CKEDITOR.tools.extend( editor.lang, plugin.lang[ languageCodes[ i ] ] );
\r
240 // Call the plugin method (beforeInit and init).
\r
241 if ( plugin[ methods[ m ] ] )
\r
242 plugin[ methods[ m ] ]( editor );
\r
246 // Load the editor skin.
\r
247 editor.fire( 'pluginsLoaded' );
\r
248 loadSkin( editor );
\r
253 var loadSkin = function( editor )
\r
255 CKEDITOR.skins.load( editor, 'editor', function()
\r
257 loadTheme( editor );
\r
261 var loadTheme = function( editor )
\r
263 var theme = editor.config.theme;
\r
264 CKEDITOR.themes.load( theme, function()
\r
266 var editorTheme = editor.theme = CKEDITOR.themes.get( theme );
\r
267 editorTheme.path = CKEDITOR.themes.getPath( theme );
\r
268 editorTheme.build( editor );
\r
270 if ( editor.config.autoUpdateElement )
\r
271 attachToForm( editor );
\r
275 var attachToForm = function( editor )
\r
277 var element = editor.element;
\r
279 // If are replacing a textarea, we must
\r
280 if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_REPLACE && element.is( 'textarea' ) )
\r
282 var form = element.$.form && new CKEDITOR.dom.element( element.$.form );
\r
285 function onSubmit()
\r
287 editor.updateElement();
\r
289 form.on( 'submit',onSubmit );
\r
291 // Setup the submit function because it doesn't fire the
\r
293 if ( !form.$.submit.nodeName )
\r
295 form.$.submit = CKEDITOR.tools.override( form.$.submit, function( originalSubmit )
\r
299 editor.updateElement();
\r
301 // For IE, the DOM submit function is not a
\r
302 // function, so we need thid check.
\r
303 if ( originalSubmit.apply )
\r
304 originalSubmit.apply( this, arguments );
\r
311 // Remove 'submit' events registered on form element before destroying.(#3988)
\r
312 editor.on( 'destroy', function()
\r
314 form.removeListener( 'submit', onSubmit );
\r
320 function updateCommandsMode()
\r
323 commands = this._.commands,
\r
326 for ( var name in commands )
\r
328 command = commands[ name ];
\r
329 command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
\r
334 * Initializes the editor instance. This function is called by the editor
\r
335 * contructor (editor_basic.js).
\r
338 CKEDITOR.editor.prototype._init = function()
\r
340 // Get the properties that have been saved in the editor_base
\r
342 var element = CKEDITOR.dom.element.get( this._.element ),
\r
343 instanceConfig = this._.instanceConfig;
\r
344 delete this._.element;
\r
345 delete this._.instanceConfig;
\r
347 this._.commands = {};
\r
348 this._.styles = [];
\r
351 * The DOM element that has been replaced by this editor instance. This
\r
352 * element holds the editor data on load and post.
\r
353 * @name CKEDITOR.editor.prototype.element
\r
354 * @type CKEDITOR.dom.element
\r
356 * var editor = CKEDITOR.instances.editor1;
\r
357 * alert( <b>editor.element</b>.getName() ); "textarea"
\r
359 this.element = element;
\r
362 * The editor instance name. It hay be the replaced element id, name or
\r
363 * a default name using a progressive counter (editor1, editor2, ...).
\r
364 * @name CKEDITOR.editor.prototype.name
\r
367 * var editor = CKEDITOR.instances.editor1;
\r
368 * alert( <b>editor.name</b> ); "editor1"
\r
370 this.name = ( element && ( this.elementMode == CKEDITOR.ELEMENT_MODE_REPLACE )
\r
371 && ( element.getId() || element.getNameAtt() ) )
\r
374 if ( this.name in CKEDITOR.instances )
\r
375 throw '[CKEDITOR.editor] The instance "' + this.name + '" already exists.';
\r
378 * The configurations for this editor instance. It inherits all
\r
379 * settings defined in (@link CKEDITOR.config}, combined with settings
\r
380 * loaded from custom configuration files and those defined inline in
\r
381 * the page when creating the editor.
\r
382 * @name CKEDITOR.editor.prototype.config
\r
385 * var editor = CKEDITOR.instances.editor1;
\r
386 * alert( <b>editor.config.theme</b> ); "default" e.g.
\r
388 this.config = CKEDITOR.tools.prototypedCopy( CKEDITOR.config );
\r
391 * Namespace containing UI features related to this editor instance.
\r
392 * @name CKEDITOR.editor.prototype.ui
\r
393 * @type CKEDITOR.ui
\r
396 this.ui = new CKEDITOR.ui( this );
\r
399 * Controls the focus state of this editor instance. This property
\r
400 * is rarely used for normal API operations. It is mainly
\r
401 * destinated to developer adding UI elements to the editor interface.
\r
402 * @name CKEDITOR.editor.prototype.focusManager
\r
403 * @type CKEDITOR.focusManager
\r
406 this.focusManager = new CKEDITOR.focusManager( this );
\r
408 CKEDITOR.fire( 'instanceCreated', null, this );
\r
410 this.on( 'mode', updateCommandsMode, null, null, 1 );
\r
412 initConfig( this, instanceConfig );
\r
416 CKEDITOR.tools.extend( CKEDITOR.editor.prototype,
\r
417 /** @lends CKEDITOR.editor.prototype */
\r
420 * Adds a command definition to the editor instance. Commands added with
\r
421 * this function can be later executed with {@link #execCommand}.
\r
422 * @param {String} commandName The indentifier name of the command.
\r
423 * @param {CKEDITOR.commandDefinition} commandDefinition The command definition.
\r
425 * editorInstance.addCommand( 'sample',
\r
427 * exec : function( editor )
\r
429 * alert( 'Executing a command for the editor name "' + editor.name + '"!' );
\r
433 addCommand : function( commandName, commandDefinition )
\r
435 return this._.commands[ commandName ] = new CKEDITOR.command( this, commandDefinition );
\r
438 addCss : function( css )
\r
440 this._.styles.push( css );
\r
444 * Destroys the editor instance, releasing all resources used by it.
\r
445 * If the editor replaced an element, the element will be recovered.
\r
446 * @param {Boolean} [noUpdate] If the instance is replacing a DOM
\r
447 * element, this parameter indicates whether or not to update the
\r
448 * element with the instance contents.
\r
450 * alert( CKEDITOR.instances.editor1 ); e.g "object"
\r
451 * <b>CKEDITOR.instances.editor1.destroy()</b>;
\r
452 * alert( CKEDITOR.instances.editor1 ); "undefined"
\r
454 destroy : function( noUpdate )
\r
457 this.updateElement();
\r
459 this.theme.destroy( this );
\r
460 this.fire( 'destroy' );
\r
461 CKEDITOR.remove( this );
\r
465 * Executes a command.
\r
466 * @param {String} commandName The indentifier name of the command.
\r
467 * @param {Object} [data] Data to be passed to the command
\r
468 * @returns {Boolean} "true" if the command has been successfuly
\r
469 * executed, otherwise "false".
\r
471 * editorInstance.execCommand( 'Bold' );
\r
473 execCommand : function( commandName, data )
\r
475 var command = this.getCommand( commandName );
\r
484 if ( command && command.state != CKEDITOR.TRISTATE_DISABLED )
\r
486 if ( this.fire( 'beforeCommandExec', eventData ) !== true )
\r
488 eventData.returnValue = command.exec( eventData.commandData );
\r
490 // Fire the 'afterCommandExec' immediately if command is synchronous.
\r
491 if ( !command.async && this.fire( 'afterCommandExec', eventData ) !== true )
\r
492 return eventData.returnValue;
\r
496 // throw 'Unknown command name "' + commandName + '"';
\r
501 * Gets one of the registered commands. Note that, after registering a
\r
502 * command definition with addCommand, it is transformed internally
\r
503 * into an instance of {@link CKEDITOR.command}, which will be then
\r
504 * returned by this function.
\r
505 * @param {String} commandName The name of the command to be returned.
\r
506 * This is the same used to register the command with addCommand.
\r
507 * @returns {CKEDITOR.command} The command object identified by the
\r
510 getCommand : function( commandName )
\r
512 return this._.commands[ commandName ];
\r
516 * Gets the editor data. The data will be in raw format. It is the same
\r
517 * data that is posted by the editor.
\r
519 * @returns (String) The editor data.
\r
521 * if ( CKEDITOR.instances.editor1.<b>getData()</b> == '' )
\r
522 * alert( 'There is no data available' );
\r
524 getData : function()
\r
526 this.fire( 'beforeGetData' );
\r
528 var eventData = this._.data;
\r
530 if ( typeof eventData != 'string' )
\r
532 var element = this.element;
\r
533 if ( element && this.elementMode == CKEDITOR.ELEMENT_MODE_REPLACE )
\r
534 eventData = element.is( 'textarea' ) ? element.getValue() : element.getHtml();
\r
539 eventData = { dataValue : eventData };
\r
541 // Fire "getData" so data manipulation may happen.
\r
542 this.fire( 'getData', eventData );
\r
544 return eventData.dataValue;
\r
547 getSnapshot : function()
\r
549 var data = this.fire( 'getSnapshot' );
\r
551 if ( typeof data != 'string' )
\r
553 var element = this.element;
\r
554 if ( element && this.elementMode == CKEDITOR.ELEMENT_MODE_REPLACE )
\r
555 data = element.is( 'textarea' ) ? element.getValue() : element.getHtml();
\r
561 loadSnapshot : function( snapshot )
\r
563 this.fire( 'loadSnapshot', snapshot );
\r
567 * Sets the editor data. The data must be provided in raw format.
\r
568 * @param {String} data HTML code to replace the curent content in the editor.
\r
570 * CKEDITOR.instances.editor1.<b>setData( '<p>This is the editor data.</p>' )</b>;
\r
572 setData : function( data )
\r
574 // Fire "setData" so data manipulation may happen.
\r
575 var eventData = { dataValue : data };
\r
576 this.fire( 'setData', eventData );
\r
578 this._.data = eventData.dataValue;
\r
580 this.fire( 'afterSetData', eventData );
\r
584 * Inserts HTML into the currently selected position in the editor.
\r
585 * @param {String} data HTML code to be inserted into the editor.
\r
587 * CKEDITOR.instances.editor1.<b>insertHtml( '<p>This is a new paragraph.</p>' )</b>;
\r
589 insertHtml : function( data )
\r
591 this.fire( 'insertHtml', data );
\r
595 * Inserts an element into the currently selected position in the
\r
597 * @param {CKEDITOR.dom.element} element The element to be inserted
\r
600 * var element = CKEDITOR.dom.element.createFromHtml( '<img src="hello.png" border="0" title="Hello" />' );
\r
601 * CKEDITOR.instances.editor1.<b>insertElement( element )</b>;
\r
603 insertElement : function( element )
\r
605 this.fire( 'insertElement', element );
\r
608 checkDirty : function()
\r
610 return ( this.mayBeDirty && this._.previousValue !== this.getSnapshot() );
\r
613 resetDirty : function()
\r
615 if ( this.mayBeDirty )
\r
616 this._.previousValue = this.getSnapshot();
\r
620 * Updates the <textarea> element that has been replaced by the editor with
\r
621 * the current data available in the editor.
\r
623 * CKEDITOR.instances.editor1.updateElement();
\r
624 * alert( document.getElementById( 'editor1' ).value ); // The current editor data.
\r
626 updateElement : function()
\r
628 var element = this.element;
\r
629 if ( element && this.elementMode == CKEDITOR.ELEMENT_MODE_REPLACE )
\r
631 if ( element.is( 'textarea' ) )
\r
632 element.setValue( this.getData() );
\r
634 element.setHtml( this.getData() );
\r
639 CKEDITOR.on( 'loaded', function()
\r
641 // Run the full initialization for pending editors.
\r
642 var pending = CKEDITOR.editor._pending;
\r
645 delete CKEDITOR.editor._pending;
\r
647 for ( var i = 0 ; i < pending.length ; i++ )
\r
648 pending[ i ]._init();
\r