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.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, butconfig.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, 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
andclass
attributes are accepted, butclass
must be eitherclass= "left"
orclass= "right"
. -
span{!font-family}
,span{!color}
,span(!marker)
– The<span>
tags will be accepted if either thefont-family
orcolor
style 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-color
was
not set as allowed for<td>
tag so it was removed).
Related Features
- Content Filtering – Advanced Content Filter – Automatic Mode
- Toolbar – Custom Editor Toolbar
- Tutorials – Abbreviation (Custom Plugin with Dialog, Context Menu and ACF)
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" ><ul> <li>This is an <strong>unordered list</strong></li> <li>List item 2</li> <li>List item 3</li> </ul> <hr /> <table border= "2" > <tr><td>A simple table </td><td>with two rows</td></tr> <tr><td style= "background-color:#ffdddd;" >with background color</td><td style= "background-color:#ffdddd;" >for bottom cells</td></tr> </table> </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" ><ul> <li>This is an <strong>unordered list</strong></li> <li>List item 2</li> <li>List item 3</li> </ul> <hr /> <table border= "2" > <tr><td>A simple table </td><td>with two rows</td></tr> <tr><td style= "background-color:#ffdddd;" >with background color</td><td style= "background-color:#ffdddd;" >for bottom cells</td></tr> </table> </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>