Using CKEditor API Documentation

CKEditor 4 comes with a rich API that allows developers to interact with the editor as well as provide new features for it (see for example Plugin SDK and Widget SDK). The examples presented below show just a tiny subset of all available features that CKEditor API offers.
Related Features

Get Sample Source Code

Using CKEditor API
<!doctype html>
<html lang="en">

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

<body>
  <textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;.
You are using &lt;a href="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
</textarea>
  <script>
    // Helper function to display messages below CKEditor 4.
    function ShowMessage(msg) {
      document.getElementById('eMessage').innerHTML = msg;
    }

    function InsertHTML() {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;
      var value = document.getElementById('htmlArea').value;

      // Check the active editing mode.
      if (editor.mode == 'wysiwyg') {
        // Insert HTML code.
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml
        editor.insertHtml(value);
      } else
        alert('You must be in WYSIWYG mode!');
    }

    function InsertText() {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;
      var value = document.getElementById('txtArea').value;

      // Check the active editing mode.
      if (editor.mode == 'wysiwyg') {
        // Insert as plain text.
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertText
        editor.insertText(value);
      } else
        alert('You must be in WYSIWYG mode!');
    }

    function SetContents() {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;
      var value = document.getElementById('htmlArea').value;

      // Set editor content (replace current content).
      // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-setData
      editor.setData(value);
    }

    function GetContents() {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;

      // Get editor content.
      // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-getData
      alert(editor.getData());
    }

    function ExecuteCommand(commandName) {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;

      // Check the active editing mode.
      if (editor.mode == 'wysiwyg') {
        // Execute the command.
        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-execCommand
        editor.execCommand(commandName);
      } else
        alert('You must be in WYSIWYG mode!');
    }

    function CheckDirty() {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;
      // Checks whether the current editor content contains changes when compared
      // to the content loaded into the editor at startup.
      // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-checkDirty
      alert(editor.checkDirty());
    }

    function ResetDirty() {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;
      // Resets the "dirty state" of the editor.
      // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-resetDirty
      editor.resetDirty();
      alert('The "IsDirty" status was reset.');
    }

    function Focus() {
      // Get the editor instance that you want to interact with.
      var editor = CKEDITOR.instances.editor1;
      // Focuses the editor.
      // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-focus
      editor.focus();
    }
  </script>
  <script>
    // Attaching event listeners to the global CKEDITOR object.
    // The instanceReady event is fired when an instance of CKEditor 4 has finished its initialization.
    CKEDITOR.on('instanceReady', function(ev) {
      ShowMessage('Editor instance <em>' + ev.editor.name + '</em> was loaded.');

      // The editor is ready, so sample buttons can be displayed.
      document.getElementById('eButtons').style.display = 'block';
    });

    // Replace the <textarea id="editor1"> with a CKEditor 4 instance.
    // A reference to the editor object is returned by CKEDITOR.replace() allowing you to work with editor instances.
    var editor = CKEDITOR.replace('editor1', {
      height: 150,
      removeButtons: 'PasteFromWord'
    });

    // Attaching event listeners to CKEditor 4 instances.
    // Refer to https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html for a list of all available events.
    editor.on('focus', function(evt) {
      ShowMessage('Editor instance <em>' + this.name + '</em> <b>is focused</b>.');
    });
    editor.on('blur', function(evt) {
      ShowMessage('Editor instance <em>' + this.name + '</em> <b>lost focus</b>.');
    });
    // Helper variable to count the number of detected changes in CKEditor 4.
    var changesNum = 0;
    editor.on('change', function(evt) {
      ShowMessage('The number of changes in <em>' + this.name + '</em>: <b>' + ++changesNum + '</b>.');
    });
  </script>
  <p id="eMessage"></p>
  <div id="eButtons" style="display: none">
    <p>
      <input onclick="InsertHTML();" type="button" value="Insert HTML">
      <input onclick="SetContents();" type="button" value="Set Editor content">
      <input onclick="GetContents();" type="button" value="Get Editor Content (HTML)">
    </p>

    <textarea cols="100" id="htmlArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML code.&lt;/p&gt;</textarea>
    <p>
      <input onclick="InsertText();" type="button" value="Insert Text">
    </p>
    <textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.

Second line of text preceded by two line breaks.</textarea>
    <p>
      <input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute the &quot;Bold&quot; Command">
      <input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute the &quot;Link&quot; Command">
      <input onclick="Focus();" type="button" value="Focus">
      <input onclick="CheckDirty();" type="button" value="checkDirty()">
      <input onclick="ResetDirty();" type="button" value="resetDirty()">
    </p>
  </div>
</body>

</html>