CKEditor 4 Documentation

Inline Editing

Inline Editing is a new technology introduced in CKEditor 4 that allows you to select any editable element on the page and edit it in-place. As a result, the editor can be used to edit content that looks just like the final page.

It is a total WYSIWYG experience, because not only the edited content looks like the final outcome, but also the page and the context where the content is placed is the real one.

To try it out, see the demo on the official CKEditor site.

Inline editor example

Content Styles

Inline editing is a true WYSIWYG experience and on the contrary to classic editing, the styles that are used for edited content come directly from the document stylesheet. This means that inline editors ignore default CKEditor content styles provided through the CKEDITOR.config.contentsCss configuration option and use the styles from the page that CKEditor is rendered on.

Enabling Inline Editing

Inline Editing is enabled directly on HTML elements through the HTML5 contenteditable attribute.

Suppose, for example, that you want to make a <div> element editable. In order to achieve this, it is enough to do the following:

<div id="editable" contenteditable="true">
    <h1>Inline Editing in Action!</h1>
    <p>The "div" element that contains this text is now editable.
</div>

It is also possible to enable inline editing with explicit code, by calling the CKEDITOR.inline method for the element that needs to have it enabled. Note that in this case you need to turn off automatic editor creation first by setting the CKEDITOR.disableAutoInline option to true.

Do remember that if the DOM element for which inline editing is being enabled does not have the contenteditable attribute set to true, the editor will start in read-only mode.

<div id="editable" contenteditable="true">
    <h1>Inline Editing in Action!</h1>
    <p>The "div" element that contains this text is now editable.
</div>
<script>
    // Turn off automatic editor creation first.
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline( 'editable' );
</script>

When you click inside the content of this <div> element, the CKEditor toolbar will appear.

The list of elements that support inline editing is available in the CKEDITOR.dtd.$editable property.

Inline Editing for Textarea

Since CKEditor 4.2 you can also turn <textarea> elements into inline editors. When you call the CKEDITOR.inline method on a <textarea>, an additional <div> element with inline editing enabled will replace the original <textarea>.

Retrieving the Editor Data

Unlike in classic editing, the data edited with CKEditor is not placed inside a <textarea> when using inline editing. It is present directly in the page DOM structure instead. It is thus the job of your application to retrieve the data and manipulate it for saving.

To retrieve the editor data, call the CKEDITOR.editor.getData method of the editor instance. For the examples above, this would look like the following:

<script>
    var data = CKEDITOR.instances.editable.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 <div> was passed to the CKEDITOR.instances object to make it possible to retrieve the editor instance.