Please refer to the Developer's Guide for instructions on how to customize CKEditor. Also visit the CKEditor SDK to see the numerous features and editor setups that you can use!

Before downloading, use the CKBuilder to select only the features and languages you will be using. Also refer to this guide on how to lower CKEditor loading time.

CKBuilder helps users customize CKEditor before downloading. It lets you to tailor a faster and lighter editor, containing the exact features you want. Go to the CKBuilder page and select which plugins, skin and languages you want installed, then download your “perfect” version of CKEditor.

If the editor is created based on a <textarea> element (CKEDITOR.replace() or CKEDITOR.replaceClass()) and this textarea is inside a <form>, then data will be automatically submitted together with the form. Remember to add a name attribute to the textarea. This integration method can be found in the Saving Data in CKEditor Replacing a Textarea sample.

If the editor replaces a <div> element or is appended with CKEDITOR.appendTo(), the integration has to be handled by you. When you want to save data, e.g, using Ajax, you can retrieve current data from the editor by using the editor.getData() method. An editor instance can be found in the CKEDITOR.instances object and is also returned from the CKEDITOR.appendTo() and CKEDITOR.replace() methods. This integration method can be found in the CKEditor in Ajax Applications sample.

Read more in the Getting and Saving Data in CKEditor article.

It's possible to replace a <textarea> element with inline mode. Similarly, like in classic mode, the editor's data will be submitted together with a form. This integration method can be found in the Saving Data in CKEditor Replacing a Textarea sample.

In other cases you need to handle saving data by yourself, as in the second case in classic mode. This integration method can be found in the CKEditor in Ajax Applications sample.

Read more in the Getting and Saving Data in CKEditor article.

You can use localStorage and/or onbeforeunload to prevent users from losing content when they mistakenly closed the browser tab.

There are many ways to automatically save editor changes. You can do the following:

  • On editor blur use the editor#blur event.
  • Once every N seconds use editor.checkDirty() and resetDirty() to verify whether changes have been made.
  • When a user types use the editor#change event, however it's not recommended to make AJAX calls on every #change event as it may happen too often. The event must be debounced, e.g., using the eventsBuffer method.

Documentation on creating custom plugins, including hands-on tutorials, is located in our Plugin SDK. The working demos of the plugins created in the tutorials are available in the CKEditor SDK.

The community is always accepting localization contributions. If you want to translate CKEditor to your language, visit this page.

First you must register, then post your custom content in the Add-ons repository.

CKEditor is now available in over 60 languages. To see the current status, please visit the UI Languages demo page. Also check out the project’s CKEditor UI Translation Center at Transifex if you would like to help localize the editor into your language or correct an existing translation.

Read more information about setting the language of the editor interface in the documentation.

CKFinder

Enrich CKEditor with image
and file uploads

Find out more

Accessibility Checker

Ensure accessibility in content creation with no effort

Find out more