How to adjust CKEditor settings

CKEditor holds its settings in the config.js file. Basically, there are three ways you can edit CKEditor settings: directly in the config.js file, per instance configuration and custom config files. Let’s review these options in detail.

Adjusting CKEditor settings in config.js

If you use the hosted version of CKEditor, you can edit its config.js file directly and place any settings and options in this file. This is the most common option in fact. If some manual tells you to edit CKEditor's configuration, just edit config.js file.

Here is how you can allow any content in the editor:

config.allowedContent = true;

While this line tells JS+ Image Editor to activate the text tool by default:

config.jsplus_image_editor_init_tool = 'text';

You should place the code to the config.js file.

Per instance adjustment of CKEditor settings

Another option to set CKEditor parameters is to pass them when you create an instance of CKEditor using the replace function. Let’s illustrate this by setting the above allowedContent variable this way:

In your HTML code place the following line:

CKEDITOR.replace('editor1', { allowedContent: true });

Here, we create an instance of CKEditor and replace the element with id editor1 with it. We pass our allowedContent setting as a second parameter of the replace function.

Adjusting CKEditor settings using a custom config file

Finally, you can configure CKEditor using a custom config file. If you use the CDN version of CKEditor, you cannot edit config.js file as described in the first method. At the same time, using per instance configuration may prove to be too bulky and inconvenient if you need to set or modify multiple parameters.

In this case, the best option is using a custom configuration file. Create a file named the way you want, for example: myconfig.js. Place any options and parameters you want to set as shown below:

CKEDITOR.editorConfig = function( config ) {
...
config.allowedContent = true;
config.jsplus_image_editor_init_tool = 'text';
...
}

Upload myconfig.js to your website and then tell CKEditor to load it as follows:

CKEDITOR.replace('editor1', { customConfig: '/ckeditor/myconfig.js'});

The path specified in the customConfig variable is the path where you uploaded your custom config file.