Contribute to this guideReport an issue

Applying Block-Level Text Formats Documentation

Block-level text formats are provided through the Format plugin which by default is available in the Standard and Full distributions.

When the plugin is enabled, the button is automatically added to the toolbar. Once clicked, it opens the drop-down list with text formats that can be applied to your document. The formats work on block level which means that you do not need to select any text in order to apply them and entire blocks will be affected by your choice. Read about basic text styles and the Styles drop-down list if you want to apply inline styles on selected text fragments.

Default Text Formats

Some basic text formats like paragraph or headings are pre-defined in CKEditor 4, as visible in the editor instance below. The default collection is set in the config.format_tags option, although normally in the Standard distribution a few of these formats are disabled. Refer to the Applying Block-Level Text Formats documentation for more information on how to enable them like in the instance below.

Custom Text Format Definition

CKEditor 4 allows you to both decide which of the default text formats will be available in the Format drop-down list and adjust existing format definitions, for example by adding a custom class. Refer to the Applying Block-Level Text Formats documentation for more information on how to customize this feature.

The editor instance below contains a reduced list of available text formats when compared to the first example. Additionally, Heading 1, Heading 2 and Formatted text format definitions now include custom classes applying the colors and in case of headings, also a different font.

The text format feature is automatically integrated with Advanced Content Filter, so all custom format definitions are treated as allowed by the editor content filtering mechanism.

Related Features

Get Sample Source Code

  • Default text formats
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Default text formats</title>
      <script src="https://cdn.ckeditor.com/4.24.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>
        CKEDITOR.replace('editor1', {
          height: 280,
          // List of text formats available for this editor instance.
          format_tags: 'p;h1;h2;h3;h4;h5;h6;pre;address;div',
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>
  • Custom text format definitions
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Custom text format definitions</title>
      <script src="https://cdn.ckeditor.com/4.24.0-lts/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor2" name="editor2" 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>
        CKEDITOR.replace('editor2', {
          height: 280,
          // Adding a custom stylesheet with some additional styles for text formats.
          // Default CKEditor 4 styles are included as well to avoid copying default styles.
          contentsCss: [
            'http://cdn.ckeditor.com/4.24.0-lts/full-all/contents.css',
            'https://ckeditor.com/docs/ckeditor4/4.24.0-lts/examples/assets/css/format.css'
          ],
          // List of text formats available for this editor instance.
          format_tags: 'p;h1;h2;h3;pre;div',
          // Custom Heading 1 and Formatted format definitions.
          format_h1: {
            element: 'h1',
            attributes: {
              'class': 'contentHeader1'
            }
          },
          format_h2: {
            element: 'h2',
            attributes: {
              'class': 'contentHeader2'
            }
          },
          format_pre: {
            element: 'pre',
            attributes: {
              'class': 'formattedCode'
            }
          },
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>