CKEditor SDK - index

CKEditor in Ajax Applications Documentation

With inline editing and possibility to create and destroy CKEditor instances dynamically, CKEditor is a perfect match for Ajax applications. Getting updated data from CKEditor is easy thanks to rich JavaScript API. It is also possible to detect whenever a change is made in the editor thanks to the change event, which makes additional features like auto-saving really easy to develop.

Creating and Destroying CKEditor on the Fly

In this example CKEditor is created dynamically after pressing the "Create Editor" button. After pressing the "Remove Editor" button the editor content is passed to a dedicated <div> element and CKEditor is removed.

This functionality is achieved using just three simple methods: CKEDITOR.appendTo(), editor.getData() and editor.destroy().

The change Event

Whenever a change is made in the editor, CKEditor fires a change event, which makes it possible to auto-save data on the fly. In the example below the change event is used to mirror entered content below the editor. To see it in action, start typing in the editing area.

Saving data is a server-side operation and you are free to implement the save functionality on your own, in any way you like. CKEditor is a pure JavaScript component and it does not offer anything more than JavaScript methods and events to access the data so that you could save it on the server.

Be aware that a Save plugin for CKEditor is available. It provides the   button, which fires a save event, but it currently works only for classic editor placed inside the <form> element. If you would like to use the Save button to save data without reloading the page, e.g. in an Ajax application using inline editor, check the documentation about saving data.

Related Features