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

HTML Output Formatting Documentation

CKEditor 4 offers a flexible output formatting system that gives developers full control over what the HTML code produced by the editor will look like. It is possible to define:

  • When to indent tags (each tag may have a different configuration) and which indentation method to use (tabs, spaces).
  • When to use line breaks in source code, including setting if line breaks should be used before/after opening/closing tags, for each tag.
  • Which character sequence to use for line breaks.
  • How to treat self-closing tags.
  • How to handle HTML entities.

CKEditor 4 with Custom HTML Formatting

In the example below CKEditor 4 was configured to use more new lines for block elements, lists and tables than in default settings. New lines are thus added before the tag is opened or closed and after the tag is opened or closed. Additionally, indentation was added to descendant elements.

Refer to HTML Output Formatting documentation for more details on modifying HTML Output Writer rules and producing desired source code format.

Numerous configuration options are available to control the HTML markup (tags, attributes, styles) produced by specific CKEditor 4 features (e.g. config.coreStyles_bold for the Bold button) or the sort of HTML code that is allowed in the editor (see Advanced Content Filter). Features mentioned in this sample are strictly associated with generic HTML source code formatting. Going carefully through the list of all CKEditor 4 configuration options might help you get familiar with what is possible with CKEditor 4 WYSIWYG editor.

Related Features

Get Sample Source Code

  • CKEditor with custom HTML formatting 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>CKEditor with custom HTML formatting</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>
    var editor1 = CKEDITOR.replace('editor1', {
      extraAllowedContent: 'div',
      height: 460,
      removeButtons: 'PasteFromWord'
    });
    editor1.on('instanceReady', function() {
      // Output self-closing tags the HTML4 way, like <br>.
      this.dataProcessor.writer.selfClosingEnd = '>';

      // Use line breaks for block elements, tables, and lists.
      var dtd = CKEDITOR.dtd;
      for (var e in CKEDITOR.tools.extend({}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
        this.dataProcessor.writer.setRules(e, {
          indent: true,
          breakBeforeOpen: true,
          breakAfterOpen: true,
          breakBeforeClose: true,
          breakAfterClose: true
        });
      }
      // Start in source mode.
      this.setMode('source');
    });
  </script>
</body>

</html>