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

Advanced Content Filter – Automatic ModeDocumentation

Advanced Content Filter (ACF) is an important CKEditor 4 core feature that filters incoming HTML content by transforming and deleting disallowed elements, attributes, classes and styles. By default it is enabled and works in automatic mode, which means that CKEditor will only accept content that was defined as allowed by enabled CKEditor features (such as plugins or buttons).

ACF is a highly configurable and powerful feature, so extensive documentation is available for it, too. The basics are explained in the Getting Started section of the "CKEditor Developer's Guide" and more advanced information is available in the Deep Dive section.

The following text will be used in each sample to show different filtering options:

A sample heavily formatted text using different fonts and text colors.

Automatic ACF Mode

In the sample below CKEditor 4 works in automatic ACF mode (default behavior, requires no configuration):

  • Underline and color buttons are unavailable and there are no buttons to set font size or family. As a result CKEditor will not accept such content.
  • Bold button is enabled, so the bold formatting (provided via the <strong> element) is preserved.

Adjusting Automatic ACF Mode

It is possible to allow or disallow additional elements or properties in CKEditor 4 by passing special configuration options: config.extraAllowedContent and config.disallowedContent.

In this example config.extraAllowedContent = 'u;span{color}' has the following consequences:

  • <u> element is allowed, so the underlined text is left, even though the Underline button is not available.
  • <span style="color:..."> is allowed, so the green text is left untouched.
  • Since ACF is still in automatic mode and the font family and size buttons are not available, these text formats are removed again.

Disabling ACF

Turning ACF off is very simple and requires setting a simple configuration option: config.allowedContent = true. As a consequence, CKEditor 4 will not filter entered content, including during paste operations.

Experiment by pasting content from various sources into the editor below and into the first one (with automatic mode on). Compare the results.

Related Features

Get Sample Source Code

  • Automatic ACF mode 
    <!doctype html>
<html lang="en">

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

<body>
  <script>
    // ACF is enabled by default regardless whether toolbar configuration is provided or not.
    // By having a smaller number of features enabled in the toolbar it should be easier to understand how ACF works.
    CKEDITOR.config.toolbar = [{
        name: 'basicstyles',
        items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
      },
      {
        name: 'paragraph',
        items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
      },
      {
        name: 'links',
        items: ['Link', 'Unlink']
      },
      {
        name: 'insert',
        items: ['Image']
      },
      {
        name: 'document',
        items: ['Source']
      },
      {
        name: 'about',
        items: ['About']
      }
    ];
    // Disable paste filter to avoid confusion on browsers on which it is enabled by default and may affect results.
    // Read more in https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter-section-filtering-pasted-and-dropped-content
    CKEDITOR.config.pasteFilter = null;

    CKEDITOR.config.height = 150;
    // Auto Grow has nothing to do with ACF.
    // However, to make users comfortable while pasting content into a tiny editing area, we would let the editor grow.
    CKEDITOR.config.extraPlugins = 'autogrow';
    CKEDITOR.config.autoGrow_maxHeight = 500;
    CKEDITOR.config.autoGrow_minHeight = 150;
  </script>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;A sample &lt;u&gt;heavily formatted text&lt;/u&gt; using &lt;strong&gt;&lt;span style="font-family: 'Comic Sans MS';font-size:16px"&gt;different fonts&lt;/span&gt;&lt;/strong&gt; and &lt;span style="font-size:18px;color:#00FF00;background-color: #FFFF00"&gt;text colors&lt;/span&gt;. &lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>
  • Automatic ACF mode with extra allowed content 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Automatic ACF mode with extra allowed content</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <script>
    // ACF is enabled by default regardless whether toolbar configuration is provided or not.
    // By having a smaller number of features enabled in the toolbar it should be easier to understand how ACF works.
    CKEDITOR.config.toolbar = [{
        name: 'basicstyles',
        items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
      },
      {
        name: 'paragraph',
        items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
      },
      {
        name: 'links',
        items: ['Link', 'Unlink']
      },
      {
        name: 'insert',
        items: ['Image']
      },
      {
        name: 'document',
        items: ['Source']
      },
      {
        name: 'about',
        items: ['About']
      }
    ];
    // Disable paste filter to avoid confusion on browsers on which it is enabled by default and may affect results.
    // Read more in https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter-section-filtering-pasted-and-dropped-content
    CKEDITOR.config.pasteFilter = null;

    CKEDITOR.config.height = 150;
    // Auto Grow has nothing to do with ACF.
    // However, to make users comfortable while pasting content into a tiny editing area, we would let the editor grow.
    CKEDITOR.config.extraPlugins = 'autogrow';
    CKEDITOR.config.autoGrow_maxHeight = 500;
    CKEDITOR.config.autoGrow_minHeight = 150;
  </script>
  <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;A sample &lt;u&gt;heavily formatted text&lt;/u&gt; using &lt;strong&gt;&lt;span style="font-family: 'Comic Sans MS';font-size:16px"&gt;different fonts&lt;/span&gt;&lt;/strong&gt; and &lt;span style="font-size:18px;color:#00FF00;background-color: #FFFF00"&gt;text colors&lt;/span&gt;. &lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor2', {
      extraAllowedContent: 'u;span{color}',
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>
  • Disabling ACF 
    <!doctype html>
<html lang="en">

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

<body>
  <script>
    // ACF is enabled by default regardless whether toolbar configuration is provided or not.
    // By having a smaller number of features enabled in the toolbar it should be easier to understand how ACF works.
    CKEDITOR.config.toolbar = [{
        name: 'basicstyles',
        items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
      },
      {
        name: 'paragraph',
        items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
      },
      {
        name: 'links',
        items: ['Link', 'Unlink']
      },
      {
        name: 'insert',
        items: ['Image']
      },
      {
        name: 'document',
        items: ['Source']
      },
      {
        name: 'about',
        items: ['About']
      }
    ];
    // Disable paste filter to avoid confusion on browsers on which it is enabled by default and may affect results.
    // Read more in https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter-section-filtering-pasted-and-dropped-content
    CKEDITOR.config.pasteFilter = null;

    CKEDITOR.config.height = 150;
    // Auto Grow has nothing to do with ACF.
    // However, to make users comfortable while pasting content into a tiny editing area, we would let the editor grow.
    CKEDITOR.config.extraPlugins = 'autogrow';
    CKEDITOR.config.autoGrow_maxHeight = 500;
    CKEDITOR.config.autoGrow_minHeight = 150;
  </script>
  <textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;A sample &lt;u&gt;heavily formatted text&lt;/u&gt;, using &lt;strong&gt;&lt;span style="font-family: 'Comic Sans MS';font-size:16px"&gt;different fonts&lt;/span&gt;&lt;/strong&gt; and &lt;span style="font-size:18px;color:#00FF00;background-color: #FFFF00"&gt;text colors&lt;/span&gt;. &lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor3', {
      allowedContent: true,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>