CKEditor configuration example

A practical CKEditor configuration example with notes on toolbar settings, language, basePath and safely recreating editor instances.

Adding CKEditor to a page is easy; the real work is configuring it for your project: which tools appear, which language, whether the user can resize it, where uploaded images go. A working configuration example follows.

Key points in the example

Before attaching a second editor to the same field, the existing instance must be destroyed; otherwise it conflicts silently and the field never opens. This is the most common failure on screens that reload part of the page over AJAX.
If the base path is wrong the editor cannot find its own files and you get 404s in the console.
The toolbar is defined as an array; removing buttons you do not need simplifies the interface and reduces the amount of broken markup users paste in.

Keeping the configuration in a separate file rather than inline makes it easier to reuse across screens.

Html

Javascript

var editor = CKEDITOR.instances["ck_container"];

if (editor) { editor.destroy(); }

//The path of the directory where CKEditor is located.

CKEDITOR.config.basePath = "/ckeditor";

CKEDITOR.language = 'tr';

CKEDITOR.config.resize_enabled = false;

CKEDITOR.config.toolbar =

[

    ['Maximize', '-', 'Source', '-', 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo', '-', 'Find', 'Replace', '-', 'Link', 'Unlink', '-', 'CreateDiv', 'Image', 'Table', 'HorizontalRule', '-', 'SpecialChar'],

    '/',

    ['FontSize', 'Bold', 'Italic', 'Underline', 'Strike', '-', 'TextColor', 'BGColor', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Outdent', 'Indent', '-', 'Subscript', 'Superscript', '-', 'NumberedList', 'BulletedList'],

    ['RemoveFormat']

];

CKEDITOR.config.docType = "

";

CKEDITOR.config.on = {

    instanceReady: function (e) {

         //Setting the editor height

         e.editor.resize("100%", 500);

         e.editor.dataProcessor.writer.selfClosingEnd = ' />';

    }

};

CKEDITOR.dtd.$removeEmpty['i'] = false;

CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_BR;

CKEDITOR.config.autoParagraph = false;

CKEDITOR.config.ignoreEmptyParagraph = false;

CKEDITOR.config.fillEmptyBlocks = false;

CKEDITOR.config.tabSpaces = 4;

CKEDITOR.config.allowedContent = true;

CKEDITOR.config.autoUpdateElement = false;

CKEDITOR.config.entities = false;

CKEDITOR.config.extraPlugins = "uploadimage";

//The link where a file dragged onto the editor will be posted

CKEDITOR.config.uploadUrl = "/ckeditor-upload";

/*

CKEditor provides a library to display files uploaded by dragging them onto it.

In this example we wanted to show how to define, for CKEditor, a page that will display previously uploaded files.

*/

//The link of the page you prepared to display files uploaded by dragging them onto the editor

CKEDITOR.config.filebrowserBrowseUrl = "/ckeditor-browse";

//The width of the window that will open to display files uploaded by dragging them onto the editor

CKEDITOR.config.filebrowserWindowWidth = "1052";

//The height of the window that will open to display files uploaded by dragging them onto the editor

CKEDITOR.config.filebrowserWindowHeight = "789";



editor = CKEDITOR.replace("ck_container", CKEDITOR.config);

Short guide

When to use it

CKEditor configuration matters in admin panels for news, blogs, product descriptions, contracts and help content. A simple and controlled editor usually produces better content than a fully open toolbar.

What to watch

Show only the tools users actually need; extra buttons increase the chance of broken markup.
Plan image upload paths, file permissions and security filtering together.
Destroy an existing editor instance before creating another one on the same field.

Common mistake

Leaving the editor in its default state often gives too much freedom. The result can be inconsistent, heavy HTML that is hard to clean later.

Where this example helps

Small helper snippets like this save time in web applications, mobile app backends, admin panels and API projects. The important part is not copying the example blindly, but adapting it to your data format, security needs and performance expectations.