此样本页面演示了高级内容过滤器的概念 (ACF),精致 控制编辑器接受哪些类型的数据以及什么内容的工具 产生了一种输出。
ACF 控制项 每个数据源 到编辑器。 它处理手动插入的两个HTML(即由用户粘贴) 和程序上类似:
editor.setData( '<p>Hello world!</p>' );
ACF 丢弃无效的 无用的HTML标记和属性,因此编辑器在执行过程中保持“干净” runtime. ACF 行为 可以针对特定情况进行配置和调整,以防止 输出HTML(即在CMS系统中)不受污染。 这种过滤是客户端的第一道防线 against "标签汤”, 精确限制哪些标签,属性和样式的工具 允许(期望)。正确配置后, ACF 是生成高质量,有意过滤的HTML的简便方法。
默认情况下,高级内容过滤器处于启用状态,并且在“自动模式”下工作
它提供了一组简单的规则,允许调整过滤规则
并在必要时禁用整个功能。 config属性
responsible for this feature is config.allowedContent
.
“自动模式”是指加载的插件决定哪种类型
的内容已启用,而未启用。例如,如果链接
plugin is loaded it implies that <a>
tag is
自动允许。每个插件都有一套
of predefined ACF 规则
控制编辑器,直到
config.allowedContent
is defined manually.
假设我们的意图是限制编辑器接受(产生) 段落
仅:没有属性,没有样式,没有其他标签.
With ACF
this is very simple. Basically set
config.allowedContent
to 'p'
:
var editor = CKEDITOR.replace( textarea_id, { 允许的Content: 'p' } );
现在尝试播放允许的内容:
// Trying to insert 不允许的 tag 和 attribute. editor.setData( '<p style="color: red">Hello <em>world</em>!</p>' ); alert( editor.getData() ); // Filtered data is returned. "<p>Hello world!</p>"
What happened? Since config.allowedContent: 'p'
is set the editor assumes
that only plain <p>
are accepted. Nothing more. This is why
style
attribute 和 <em>
tag are gone. The same
如果我们将不允许的HTML粘贴到此编辑器中,则会进行过滤。
这只是其中的一小部分 ACF 可以做。要了解更多信息,请参阅下面的示例部分, 官方的高级内容过滤器指南.
当然,您可能希望CKEditor避免任何形式的过滤。
To get rid of ACF,
basically set
config.allowedContent
to true
like this:
CKEDITOR.replace( textarea_id, { 允许的Content: true } );
ACF 远远超过
输入输出 控制:整个
用户界面 编辑器的调整到什么
filters restrict. For example: if <a>
tag is
不允许的
by ACF,
then accordingly link
command, toolbar button 和 link dialog
也被禁用。编辑器很聪明:它知道必须具有哪些功能
从接口中删除以匹配过滤规则。
CKEditor can be far more specific. If <a>
tag is
允许的 通过过滤要使用的规则,但受到限制
to have only one attribute (href
)
config.allowedContent = 'a[!href]'
, 然后
链接对话框的“目标”选项卡将自动禁用为 target
属性不包含在 ACF 规则
for <a>
. This 行为 applies to dialog fields, context
菜单和工具栏按钮。
下面有几个编辑器实例呈现出不同的 ACF 设置。 他们全部, 除了最后一个内联实例,共享相同的HTML内容 形象化 不同的过滤规则如何影响相同的输入数据。
该编辑器正在使用默认配置(“自动模式”)。这意味着
config.allowedContent
由已加载的插件定义。
每个插件扩展了过滤规则,使其具有自己的关联内容
供用户使用。
该编辑器正在使用自定义配置 ACF:
CKEDITOR.replace( 'editor2', { 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' } );
以下规则可能需要其他说明:
h1 h2 h3 p blockquote strong em
-这些标签
被编辑接受。任何标签属性都将被丢弃。
a[!href]
- href
attribute is obligatory
for <a>
tag. Tags without this attribute
不屑一顾。不会接受其他任何属性。
img(left,right)[!src,alt,width,height]
- src
attribute is obligatory for <img>
tag.
alt
, width
, height
and class
attributes are accepted but
class
必须是 class="left"
or class="right"
table tr th td caption
-这些标签
被编辑接受。任何标签属性都将被丢弃。
span{!font-family}
, span{!color}
,
span(!marker)
- <span>
tags
will be accepted if either font-family
要么
color
设置样式或 class="marker"
is present.
del ins
-这些标签
被编辑接受。任何标签属性都将被丢弃。
Please note that 用户界面 的
editor is different。这是对过滤器发生的反应。
Since text-align
isn't 允许的, the align toolbar is gone.
下标/上标,罢工,下划线发生了相同的事情
(<u>
, <sub>
, <sup>
are 不允许的 通过
config.allowedContent
) 和 many other buttons.
该编辑器正在使用自定义配置 ACF. 请注意,可以将过滤器配置为对象文字 替代基于字符串的定义。
CKEDITOR.replace( 'editor3', { allowedContent: { 'b i ul ol big small': true, 'h1 h2 h3 p blockquote li': { styles: 'text-align' }, a: { attributes: '!href,target' }, img: { attributes: '!src,alt', styles: 'width,height', classes: 'left,right' } } } );
该编辑器正在使用一组自定义的插件和按钮。
CKEDITOR.replace( 'editor4', { removePlugins: 'bidi,font,forms,flash,horizontalrule,iframe,justify,table,tabletools,smiley', removeButtons: 'Anchor,Underline,Strike,Subscript,Superscript,Image', format_tags: 'p;h1;h2;h3;pre;address' } );
如您所见,删除插件和按钮意味着进行过滤。
编辑器中不允许使用多个标签,因为没有
负责创建和编辑此内容的插件/按钮
内容的种类(例如:图片丢失是因为
of removeButtons: 'Image'
). The conclusion is that
ACF 作品“向后”
as well: 修改 用户界面
元素正在更改允许的内容规则.
This editor is built on editable <h1>
element.
ACF 照顾
what can be included in <h1>
. Note that there
在“样式”组合中没有任何块样式。还有为什么列出,缩进,
缺少blockquote,div,form和其他按钮。
ACF 确保
no 不允许的 tags will come to <h1>
so the final
标记有效。如果用户尝试粘贴一些无效的HTML
进入这个编辑器(比如说一个列表),它将自动
转换为纯文本。