Bootstrap Tools
for CKEditor & TinyMCE
CKEditor installation TinyMCE installation Drupal 8 module
17 in 1
Includes products:
Bootstrap Include CSS/JS plugin Bootstrap Show Blocks plugin Bootstrap Advanced Blocks plugin Bootstrap Block Configuration plugin Bootstrap Templates plugin Bootstrap Button plugin Bootstrap Icons plugin Bootstrap Image Gallery plugin Bootstrap Badge plugin Bootstrap Label plugin Bootstrap Breadcrumbs plugin Bootstrap Alert plugin Bootstrap Move Column plugin Bootstrap Move Row plugin Bootstrap Delete Column plugin Bootstrap Delete Row plugin Bootstrap Add Row plugin
Installing CKEditor to WordPress Installing CKEditor to Joomla Installing CKEditor to Drupal 7 How to install CKEditor plugin from CDN How to install a plugin to CKEditor How to adjust CKEditor settings Include Bootstrap to CKEditor/TinyMCE .NET uploader configuration File and Image uploader plugins FAQ Styling Image Gallery Attach images to comments in Drupal CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Bootstrap Tools logo
Get Bootstrap Tools inside
32 in 1
Bootstrap Bundle
Bootstrap Tools logo
Get Bootstrap Tools inside
33 in 1
Bootstrap Full Bundle

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.