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.

<h1>Trabb Pardo&ndash;Knuth Algorithm</h1> <p>The <strong>Trabb Pardo&ndash;Knuth algorithm</strong> is a <a href="http://en.wikipedia.org/wiki/Computer_program">program</a> introduced by <a href="http://en.wikipedia.org/wiki/Donald_Knuth">Donald Knuth</a> and <a href="http://en.wikipedia.org/w/index.php?title=Luis_Trabb_Pardo">Luis Trabb Pardo</a> to illustrate the evolution of computer programming languages. In their 1977 work &quot;The Early Development of Programming Languages&quot;, Trabb Pardo and Knuth introduced a trivial program which involved arrays, indexing, mathematical functions, subroutines, I/O, conditionals and iteration. They then wrote implementations of the algorithm in several early programming languages to show how such concepts were expressed. The simpler <a href="http://en.wikipedia.org/wiki/Hello_world_program">Hello world program</a> has been used for much the same purpose.</p> <h2>The Algorithm</h2> <pre> ask for 11 numbers to be read into a sequence S reverse sequence S for each item in sequence S call a function to do an operation if result overflows alert user else print result</pre> <p>The algorithm reads eleven numbers from an input device, stores them in an array, and then processes them in reverse order, applying a user-defined function to each value and reporting either the value of the function or a message to the effect that the value has exceeded some threshold.</p> <hr /> <p><small>Source: <a href="http://en.wikipedia.org/wiki/Trabb_Pardo%E2%80%93Knuth_algorithm">Wikipedia.org</a></small></p>

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.

<h1 class="contentHeader1">Trabb Pardo&ndash;Knuth Algorithm</h1> <p>The <strong>Trabb Pardo&ndash;Knuth algorithm</strong> is a <a href="http://en.wikipedia.org/wiki/Computer_program">program</a> introduced by <a href="http://en.wikipedia.org/wiki/Donald_Knuth">Donald Knuth</a> and <a href="http://en.wikipedia.org/w/index.php?title=Luis_Trabb_Pardo">Luis Trabb Pardo</a> to illustrate the evolution of computer programming languages. In their 1977 work &quot;The Early Development of Programming Languages&quot;, Trabb Pardo and Knuth introduced a trivial program which involved arrays, indexing, mathematical functions, subroutines, I/O, conditionals and iteration. They then wrote implementations of the algorithm in several early programming languages to show how such concepts were expressed. The simpler <a href="http://en.wikipedia.org/wiki/Hello_world_program">Hello world program</a> has been used for much the same purpose.</p> <h2 class="contentHeader2">The Algorithm</h2> <pre class="formattedCode"> ask for 11 numbers to be read into a sequence S reverse sequence S for each item in sequence S call a function to do an operation if result overflows alert user else print result</pre> <p>The algorithm reads eleven numbers from an input device, stores them in an array, and then processes them in reverse order, applying a user-defined function to each value and reporting either the value of the function or a message to the effect that the value has exceeded some threshold.</p> <hr /> <p><small>Source: <a href="http://en.wikipedia.org/wiki/Trabb_Pardo%E2%80%93Knuth_algorithm">Wikipedia.org</a></small></p>

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

• Styling and Formatting – Basic Text Styles: Bold, Italic and More
• Styling and Formatting – Copying Text Formatting
• Styling and Formatting – Applying Styles to Editor Content
• Styling and Formatting – Setting Text and Background Color
• Content Filtering – Advanced Content Filter – Automatic Mode

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.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>
      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.25.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.25.0-lts/full-all/contents.css',
          'https://ckeditor.com/docs/ckeditor4/4.25.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>