Getting and Saving Data in CKEditor 4

CKEditor 4 helps you create content but it is the role of your website or application to deal with the data created in this way. 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 4 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.

The CKEditor JavaScript API makes it easy to retrieve and control the data. Depending on your usage scenario, the data can either be submitted to your server along with the parent <form> element or be used in Ajax applications where editor instances are created and destroyed dynamically.

# Retrieving Data from CKEditor 4

Some applications need to handle all data on the client side, sending it to the server using their specific methods. This is what usually happens in inline editing — with the possibility to create and destroy CKEditor 4 instances dynamically, CKEditor 4 is a perfect match for Ajax applications. If this is the case, it is enough to use the JavaScript API methods to easily retrieve the editor instance data.

To retrieve the editor data, call the CKEDITOR.editor.getData method of the editor instance. For an editor instance with an ID of editor1, this would look like the following:

<script>
    var data = CKEDITOR.instances.editor1.getData();

    // Your code to save "data", usually through Ajax.
</script>

If you do not save your data with a library that already encodes it by using the JavaScript encodeURIComponent method, but do it manually instead, you will have to remember to use encodeURIComponent to properly encode the data that is being sent.

Note that the ID of the original element that is replaced with CKEditor was passed to the instances object to make it possible to retrieve the editor instance.

# Saving Data in CKEditor 4 Replacing a Textarea

When CKEditor 4 functions as a replacement for a <textarea> element, the integration with the parent <form> element is automatic. CKEditor 4 automatically updates the replaced <textarea> when the form is submitted, so there is no need to change any server-side code handling form submission after enabling CKEditor on an exisiting form element.

This means that when submitting a form containing an editor instance, its data will simply be posted to the server, using the <textarea> element name as the key to retrieve it.

For example, for the <textarea> element with an ID of editor1, as used in our Quick Start Guide example, you could create this PHP code:

<?php
    $editor_data = $_POST[ 'editor1' ];
?>

This method works for any CKEditor 4 instance that replaces a <textarea> in a <form> element, both classic and inline.

Please note that the replaced <textarea> element is updated automatically by CKEditor 4 straight before submission. If you need to access the <textarea> value programatically with JavaScript (e.g. in the onsubmit handler to validate the entered data), there is a chance that the <textarea> element would still store the original data. In order to update the value of replaced <textarea> use the editor.updateElement() method.

In rare cases it may happen that the server or application configuration will reject submitted HTML content if it is not encoded first (e.g. ASP.NET ValidateRequest). In such case check the config.htmlEncodeOutput option.

If you need to get the actual data from CKEditor 4 at any moment using JavaScript, use the editor.getData() method as described above.

# Observing Changes in CKEditor 4

Whenever a change is made in the editor, CKEditor 4 fires the change event. This makes additional features like auto-saving really easy to develop.

The following example shows how to listen to the change event and print the total number of bytes to the console:

var editor = CKEDITOR.replace( 'editor1' );

// The "change" event is fired whenever a change is made in the editor.
editor.on( 'change', function( evt ) {
    // getData() returns CKEditor's HTML content.
    console.log( 'Total bytes: ' + evt.editor.getData().length );
});

# The Save Plugin

A dedicated Save plugin for CKEditor 4 is available, too. It provides the Save button, which fires the save event, but it currently works only for classic editor placed inside the <form> element.

# Getting and Saving Data Demos

The following samples are available for getting and saving data in CKEditor 4:

The Saving Data in CKEditor Replacing a Textarea sample shows how to save data for classic and inline editor replacing a <textarea> element.
The CKEditor in Ajax Applications sample shows how to dynamically create and destroy the editor and how to use the change event.