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.
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().
change EventWhenever 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.