CKEditor 3.x/Developers Guide/Setting Configurations - Revision history

Anna: /* Using a Custom Configuration File */ Minor rewriting

2011-03-08T14:44:26Z

‎Using a Custom Configuration File: Minor rewriting

Anna: Mapping CKEditor and FCKeditor Configuration Settings section added

2011-02-25T12:04:50Z

Mapping CKEditor and FCKeditor Configuration Settings section added

Anna: /* Using the config.js File */ editorConfig link added

2011-02-14T09:20:59Z

‎Using the config.js File: editorConfig link added

Anna: Custom title added

2011-01-13T09:46:47Z

Custom title added

Anna: /* Avoiding Loading External Settings Files */ Article section proof-read

2011-01-13T08:04:52Z

‎Avoiding Loading External Settings Files: Article section proof-read

Anna: /* Configuration Overload Order */ Overloading -> Loading

2011-01-13T08:03:09Z

‎Configuration Overload Order: Overloading -> Loading

Anna: /* Configurations Overload Order */ Article section proof-read and formatted

2011-01-13T08:02:26Z

‎Configurations Overload Order: Article section proof-read and formatted

Anna: /* Using a Custom Configuration File */ Article section proof-read and formatted

2011-01-13T07:54:53Z

‎Using a Custom Configuration File: Article section proof-read and formatted

Anna: /* Using the config.js File */ Article section proof-read

2011-01-13T07:45:06Z

‎Using the config.js File: Article section proof-read

Anna: /* Defining Configurations In-Page */ Article section proof-read

2011-01-13T07:31:40Z

‎Defining Configurations In-Page: Article section proof-read

@@ Line 32: / Line 32: @@
 Using a custom configuration file is another recommended method of setting CKEditor configuration. Instead of using the default <code>config.js</code> file, you can create a copy of that file anywhere in your website and simply point the editor instances to load it. The advantage of this approach is that in this way you can avoid changing the original file, which makes it easier to upgrade CKEditor later by simply overwriting all files.
-Suppose you will have copied the <code>config.js</code> file to a folder named <code>custom</code> in the root of your website. You will also have renamed the file to <code>ckeditor_config.js</code>. At that point it is enough to only set the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.customConfig customConfig] configuration option when creating the editor instances. For example:
+Suppose you copied the <code>config.js</code> file to a folder named <code>custom</code> in the root of your website. You also renamed the file to <code>ckeditor_config.js</code>. At that point it is enough to only set the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.customConfig customConfig] configuration option when creating the editor instances to use the customized settings defined in the file. For example:
 <source lang="javascript">
 CKEDITOR.replace( 'editor1',

← Older revision		Revision as of 12:04, 25 February 2011
Line 57:		Line 57:
	</source>		</source>
	This setting is definitely recommended, if you are not setting the configuration in the <code>config.js</code> file nor a custom configuration file.		This setting is definitely recommended, if you are not setting the configuration in the <code>config.js</code> file nor a custom configuration file.
		+
		+	== Mapping CKEditor and FCKeditor Configuration Settings ==
		+	If you moved to CKEditor from its predecessor, FCKeditor, you might be used to setting the configuration in the FCKeditor way. To make it easier for you to upgrade to the new editor line we have prepared a mapping between configuration settings available in [[FCKeditor_2.x/Developers_Guide\|FCKeditor 2.x]] and CKEditor 3.x. A full listing [[CKEditor_3.x/Developers_Guide/FCKeditor_CKEditor_Configuration_Mapping\|can be found here]].

@@ Line 27: / Line 27: @@
 };
 </source>
-The above <code>CKEDITOR.editorConfig</code> function definition must always be defined so that the settings could be applied. The <code>config.js</code> file will be executed in the scope of your page, so you can also make references to variables defined in-page or even in other JavaScript files.
+In order to apply the configuration settings, the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.editorConfig CKEDITOR.editorConfig]</code> function must always be defined. The <code>config.js</code> file will be executed in the scope of your page, so you can also make references to variables defined in-page or even in other JavaScript files.
 == Using a Custom Configuration File ==

← Older revision		Revision as of 09:46, 13 January 2011
Line 1:		Line 1:
		+	{{#CUSTOMTITLE:Setting CKEditor Configuration}}
	CKEditor comes with a rich set of configuration options that make it possible to customize its appearance, features, and behavior. The main configuration file is named <code>config.js</code>. This file can be found in the root of the CKEditor installation folder.		CKEditor comes with a rich set of configuration options that make it possible to customize its appearance, features, and behavior. The main configuration file is named <code>config.js</code>. This file can be found in the root of the CKEditor installation folder.

@@ Line 48: / Line 48: @@
 == Avoiding Loading External Settings Files ==
+It is also possible to completely avoid loading an external configuration file, reducing the number of files loaded. To do that, you need to set the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.customConfig customConfig] setting to an empty string. For example:
-It is also possible to completely avoid loading an external configuration file, reducing the number of files loaded. To do that, it's enough to set the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.customConfig customConfig] setting to an empty string. For example:
+<source lang="javascript">
-<source lang="javascript">CKEDITOR.replace( 'editor1',
+CKEDITOR.replace( 'editor1',
+     {
          customConfig : ''
      });
 </source>
-This setting is definitely recommended if you are not setting configurations in the config.js file nor a custom configuration file.
+This setting is definitely recommended, if you are not setting the configuration in the <code>config.js</code> file nor a custom configuration file.

@@ Line 40: / Line 40: @@
 The custom configuration file must look just like the default <code>config.js</code> file.
-== Configuration Overload Order  ==
+== Configuration Loading Order  ==
-You are not required to only use one of the above configuration options. The methods described above can be mixed and the configuration will be overloaded properly. The following list presents the configuration loading order used when creating an editor instance:
+You are not required to only use one of the above configuration options. The methods described above can be mixed and the configuration will be loaded properly. The following list presents the configuration loading order used when creating an editor instance:
 # An editor instance is created. At this point all its default configuration options are set.
 # If the <code>customConfig</code> setting has been set "in-page", that file is loaded, otherwise the default <code>config.js</code> file is loaded. All settings in the custom configuration file override current instance settings.

@@ Line 17: / Line 17: @@
 Note that the configuration options are passed through a literal object definition (starting with a "<code>{</code>" symbol and ending with a "<code>}</code>" symbol). Because of this the proper syntax for each option is <code>(''configuration name'') : (''configuration value'')</code>. Be sure to not use the "equal" character (<code>=</code>) in place of the colon character (<code>:</code>).
-== Using the config.js File  ==
+== Using the config.js File ==
+CKEditor settings can also be configured by using the <code>config.js</code> file. By default this file is mostly empty. To change CKEditor configuration, add the settings that you want to modify to the <code>config.js</code> file. For example:
-You can also place your settings inside the config.js file also. You will note that the file is mostly empty by default. You simply need to add the configurations that you want to change. For example:
+<source lang="javascript">
-<source lang="javascript">CKEDITOR.editorConfig = function( config )
+CKEDITOR.editorConfig = function( config )
+{
      config.language = 'fr';
@@ Line 26: / Line 26: @@
 };
 </source>
-The above CKEDITOR.editorConfig function definition must be always defined so the settings can be applied. This configuration file will be executed in your page scope, so you can also make references to variables defined in-page or even in another JavaScript files.
+The above <code>CKEDITOR.editorConfig</code> function definition must always be defined so that the settings could be applied. The <code>config.js</code> file will be executed in the scope of your page, so you can also make references to variables defined in-page or even in other JavaScript files.
 == Using a Custom Configuration File  ==

@@ Line 4: / Line 4: @@
 All available configuration options can be found in the [http://docs.cksource.com/ckeditor_api/index.html CKEditor JavaScript API] documentation. Refer to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html CKEDITOR.config] object definition.
-== Defining Configurations In-Page  ==
+== Defining Configuration In-Page  ==
+The best way to set the CKEditor configuration is in-page, when creating editor instances. This method lets you avoid modifying the original distribution files in the CKEditor installation folder, making the upgrade task easier.
 In-page settings can be passed to any of the editor instance creation functions, namely [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.replace CKEDITOR.replace] and [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.appendTo CKEDITOR.appendTo]. For example:
-<source lang="javascript">CKEDITOR.replace( 'editor1',
+<source lang="javascript">
+     {
          toolbar : 'Basic',
@@ Line 15: / Line 15: @@
      });
 </source>
-Note that the configurations are passed through a literal object definition (starting with "{" and ending with "}"). Because of this, the proper syntax for each option is (configuration name) + ":" + (configuration value). Be sure to not use the equal sign ("=") sign.
+Note that the configuration options are passed through a literal object definition (starting with a "<code>{</code>" symbol and ending with a "<code>}</code>" symbol). Because of this the proper syntax for each option is <code>(''configuration name'') : (''configuration value'')</code>. Be sure to not use the "equal" character (<code>=</code>) in place of the colon character (<code>:</code>).
 == Using the config.js File  ==