CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

CKEditor 4 in Ajax Applications Documentation

With inline editing and possibility to create and destroy CKEditor 4 instances dynamically, CKEditor 4 is a perfect match for Ajax applications. Getting updated data from CKEditor 4 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 4 on the Fly

In this example CKEditor 4 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 4 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 4 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 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.

Be aware that a Save plugin for CKEditor 4 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

Get Sample Source Code

  • Creating and destroying CKEditor on the fly 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Creating and destroying CKEditor on the fly</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <script>
    var editor1, html = '';

    function createEditor() {
      if (editor1)
        return;

      // Create a new editor instance inside the <div id="editor"> element,
      // setting its value to html.
      var config = {};
      editor1 = CKEDITOR.appendTo('editor1', config, html);

      // Update button states.
      document.getElementById('remove').style.display = '';
      document.getElementById('create').style.display = 'none';
    }

    function removeEditor() {
      if (!editor1)
        return;

      // Retrieve the editor content. In an Ajax application this data would be
      // sent to the server or used in any other way.
      html = editor1.getData();

      // Update <div> with "Edited Content".
      document.getElementById('editorcontent1').innerHTML = html;
      // Show <div> with "Edited Content".
      document.getElementById('content1').style.display = '';
      // Update button states.
      document.getElementById('remove').style.display = 'none';
      document.getElementById('create').style.display = '';

      // Destroy the editor.
      editor1.destroy();
      editor1 = null;
    }
  </script>
  <p>
    <input onclick="createEditor();" type="button" value="Create Editor" id="create">
    <input onclick="removeEditor();" type="button" value="Remove Editor" id="remove" style="display:none">
  </p>
  <div id="editor1">
  </div>
  <div id="content1" style="display: none">
    <h3>Edited Content</h3>
    <!-- This <div> will be used to display the editor content. -->
    <div id="editorcontent1">
    </div>
  </div>
</body>

</html>
  • The <code>change</code> event 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>The <code>change</code> event</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor2" name="editor2" rows="10"></textarea>
  <div id="content2" style="display: none">
    <p>The number of <code>change</code> events: <strong><span id="changes"></span></strong>.</p>
    <h3>Mirrored Content</h3>
    <!-- This <div> will be used to display the editor content. -->
    <div id="editorcontent2">
    </div>
  </div>
  <script>
    (function() {
      var changesCount = 0;
      var editor2 = CKEDITOR.replace('editor2', {
        removePlugins: 'sourcearea',
        removeButtons: 'PasteFromWord'

      });
      editor2.on('change', function(ev) {
        changesCount++;
        document.getElementById('content2').style.display = '';
        document.getElementById('changes').innerHTML = changesCount.toString();
        document.getElementById('editorcontent2').innerHTML = editor2.getData();
      });
    })();
  </script>
</body>

</html>