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

Advanced Content Filter – Custom ModeDocumentation

Advanced Content Filter (ACF) can work inautomatic mode,can be disabled, and can work incustom mode.

Custom mode requires the developer to provide all tags, attributes, classes and styles through theconfig.allowedContentsetting. 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, butconfig.allowedContentis 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, thehref attribute is obligatory. Any<a>tags without this attribute are discarded.
  • img(left,right)[!src,alt,width,height]– Thesrc attribute is obligatory for the<img>tag. Thealt,width,height andclassattributes are accepted, but classmust be eitherclass= "left" orclass= "right".
  • span{!font-family},span{!color}, span(!marker)– The<span>tags will be accepted if either thefont-familyor colorstyle is set orclass= "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-colorwas 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.24.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.24.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>