Source Code Editing Documentation

Although CKEditor 4 strength lies in WYSIWYG editing, the underlying format of the editor content is usually HTML. However, working directly with HTML code is also possible thanks to the source code editing feature provided by the Source Editing Area and Source Dialog plugins.

Both plugins introduce the Source toolbar button. Refer to the Source Code Editing article to learn more about this feature as well as the functional differences between the plugins.

The following editor instances show how both plugins can be combined with classic and inline editor.

Classic Editor with Default Source Editing Area

Inline Editor with Source Dialog

This inline editor instance is using the Source Dialog plugin for source editing.

Follow the steps below to try it out:

Click the Source button to display the HTML source of this text in the Source dialog window.
Close the Source dialog window to return to the WYSIWYG view.

The following configuration option was used:

config.extraPlugins = 'sourcedialog';

Classic Editor with Source Dialog

Related Features

Get Sample Source Code

Classic editor with default source editing area

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Classic editor with default source editing area</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" 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=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    // We need to turn off the automatic editor creation first.
    CKEDITOR.disableAutoInline = true;

    CKEDITOR.replace('editor1');
  </script>
</body>

</html>

Inline editor with source dialog

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Inline editor with source dialog</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>

  <link href="../template/theme/css/sdk-inline.css" rel="stylesheet" />

  <div id="editor2" contenteditable="true" class="inline-editor">
    <p>
      This <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_inline.html">inline editor</a> instance is using the&nbsp;<a href="https://ckeditor.com/cke4/addon/sourcedialog">Source Dialog</a>&nbsp;plugin
      for source editing.
    </p>

    <p>
      Follow the steps below to try it out:
    </p>

    <ul>
      <li>
        Click the&nbsp;<strong>Source&nbsp;</strong>button to display the HTML source of this text in the Source dialog window.
      </li>
      <li>
        Close the Source dialog window&nbsp;to return to the WYSIWYG view.
      </li>
    </ul>
    <p>
      The following configuration option was used:
    </p>
    <pre>config.extraPlugins = 'sourcedialog';
</pre>

  </div>
  <script>
    // We need to turn off the automatic editor creation first.
    CKEDITOR.disableAutoInline = true;

    CKEDITOR.inline('editor2', {
      extraPlugins: 'sourcedialog',
      removePlugins: 'sourcearea',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>

Classic editor with source dialog

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Classic editor with source dialog</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    // We need to turn off the automatic editor creation first.
    CKEDITOR.disableAutoInline = true;

    CKEDITOR.replace('editor3', {
      extraPlugins: 'sourcedialog',
      removePlugins: 'sourcearea',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>