Advanced Content Filter – Custom ModeDocumentation

Advanced Content Filter (ACF) can work in automatic mode, can be disabled, and can work in custom mode.

Custom mode requires the developer to provide all tags, attributes, classes and styles through the config.allowedContent setting. The provided configuration affects not only the HTML content that CKEditor 4 will accept, but also influences the features (plugins, buttons, dialog window fields) that will be available to the end user.

Automatic ACF Mode

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

Custom ACF Mode

In the sample below, the same editor is used, but config.allowedContent is manually set to:

h1 h2 h3 p blockquote strong em del ins table tr th td caption;
a[!href];
img(left,right)[!src,alt,width,height];
span{!font-family};span{!color};span(!marker);

Note how the lack of <ul>, <ol>, <li>, <hr> elements on the list affected the editor configuration: Numbered List, Bulleted List and Horizontal Rule buttons are missing. Another change is that the Table, Link or Image dialog windows have a smaller number of options, as the custom configuration did not allow as many attributes or styles as CKEditor 4 does by default.

The meaning of each rule is explained below:

h1 h2 h3 p blockquote strong em del ins table tr th td caption – These tags are accepted by the editor.
a[!href] – The <a> tag is accepted, the href attribute is obligatory. Any <a> tags without this attribute are discarded.
img(left,right)[!src,alt,width,height] – The src attribute is obligatory for the <img> tag. The alt, width, height and class attributes are accepted, but class must be either class="left" or class="right".
span{!font-family}, span{!color}, span(!marker) – The <span> tags will be accepted if either the font-family or color style is set or class="marker" is present.

Any tags not present on this list will be discarded (like the list items which were removed in the sample above). By default, attributes, styles and classes are rejected for each specified tag and must be enabled manually (background-color was not set as allowed for <td> tag so it was removed).

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>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;ul&gt;
&lt;li&gt;This is an &lt;strong&gt;unordered list&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;table border="2"&gt;
&lt;tr&gt;&lt;td&gt;A simple table &lt;/td&gt;&lt;td&gt;with two rows&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style="background-color:#ffdddd;"&gt;with background color&lt;/td&gt;&lt;td style="background-color:#ffdddd;"&gt;for bottom cells&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</textarea>
  <script>
    CKEDITOR.config.height = 180;
    // Auto Grow has nothing to do with ACF.
    // However, to make users comfortable while pasting content into a tiny editing area, we would let it grow.
    CKEDITOR.config.extraPlugins = 'autogrow';
    CKEDITOR.config.autoGrow_maxHeight = 500;
    CKEDITOR.config.autoGrow_minHeight = 150;
  </script>
  <script>
    CKEDITOR.replace('editor1', {
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>

Custom ACF mode

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

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

<body>
  <script>
    CKEDITOR.config.height = 180;
    // Auto Grow has nothing to do with ACF.
    // However, to make users comfortable while pasting content into a tiny editing area, we would let it 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;ul&gt;
&lt;li&gt;This is an &lt;strong&gt;unordered list&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;table border="2"&gt;
&lt;tr&gt;&lt;td&gt;A simple table &lt;/td&gt;&lt;td&gt;with two rows&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style="background-color:#ffdddd;"&gt;with background color&lt;/td&gt;&lt;td style="background-color:#ffdddd;"&gt;for bottom cells&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</textarea>
  <script>
    CKEDITOR.replace('editor2', {
      removeButtons: 'PasteFromWord',
      allowedContent: 'h1 h2 h3 p blockquote strong em;' +
        'a[!href];' +
        'img(left,right)[!src,alt,width,height];' +
        'table tr th td caption;' +
        'span{!font-family};' +
        'span{!color};' +
        'span(!marker);' +
        'del ins'
    });
  </script>
</body>

</html>