高级内容过滤器

发布于 2015-08-29 14:57:51 | 1019 次阅读 | 评论: 0 | 来源: PHPERZ

4 、 高级内容过滤器

介绍

注意：高级内容过滤器是在 CKEditor 4.1 中引入的。

什么是高级内容过滤器（ACF ）？

ACF 是自 CKEditor 4.1 可用的高度可配置的 CKEditor 核心特色功能。它限制和适配输入的数据（在源代码模式中或由 editor.setData 方法添加的 HTML 代码，粘贴的 HTML 代码，等等） ，因此它可以以更可行的方式配置编辑器的配置。它也可以使生成配置不允许的 HTML代码的功能无效。
高级内容过滤器有两种工作模式：

• 自 动模式-过虑器由编辑器功能（如插件，按钮和命令）进行配置，这些功能是由配置 选 项 ， 如 CKEDITOR.config.plugins 、  CKEDITOR.config.extraPlugins 和CKEDITOR.config.toolbar，来启用的。
• 定制模式-由 CKEDITOR.config.allowedContent 选项来配置过滤器，并且只有与此设置匹配的功能才被激活。

在两种模式中，可以通过使用 CKEDITOR.config.extraAllowedContent 设置来扩展过滤器的配置。
如果想使高级内容过滤器不起作用，将 CKEDITOR.config.allowedContent 设置为"true"。
所有可用的编辑器功能将被激活，并且将不会过滤输入的数据。

自动模式

当没有提供 CKEDITOR.config.allowedContent 设置时，高级内容过滤器工作于自动模式。
在编辑器初始化时，编辑功能将其规则添加到过滤器。因此，只允许使用当前加载的功能可以编辑的内容，其余所有内容都被过滤掉。
下面的例子或许可以较容易地理解 ACF 的自动模式。

1. 从完全或标准 CKEditor 包中打开 datafiltering.html 例子 （基本包提供的功能集太有限了） 。
2. 勾选 editor 1。它使用默认的配置，所以所有包中可用的按钮、按键或样式都是有效的， 并且编辑器的内容也与最初加载的内容一样 （除了标准包中的很小细节--因为标准包不包括 Justify（调整版面）插件，页脚没有向右对齐） 。
3. 现 在勾选 editor 4。你可以看到很多插件和按钮被 CKEDITOR.config.removePlugins 和CKEDITOR.config.removeButtons 移除了；CKEDITOR.config.format_tags 列表也被缩减了。配置的改变自动反映在了编辑器的内容中了--Image 工具栏按钮没有了，故在内容中也就不存在图像了； Table 插件没有了， 故添加在原始内容中的表格也被移除了。

你可以在源代码模式中看一下编辑器是如何清除粘贴的内容或 HTML 代码。

如果想将编辑器配置为工作于自动模式，但需要附加的 HTML 标记、属性、样式或类生效，可以使用 CKEDITOR.config.extraAllowedContent 配置选项。

定制模式

当定义了 CKEDITOR.config.allowedContent 设置后，高级内容过滤器就工作于定制模式。
此配置选项告诉过滤器允许哪些 HTML 元素、属性、样式和类。基于默认的规则（称为允许内容规则--Allowed Content Rules） ，编辑器过滤输入的数据，决定哪些功能生效。
允许内容规则（Allowed Content Rules）可以被设置为两种不同的格式：紧凑的字符串格式（string format）和更强大的对象格式（object format） 。关于允许内容规则，请阅读允许内容规则。
下面的例子可以使较容易地理解 ACF 的定制模式。

1. 从完全或标准 CKEditor 包中打开 datafiltering.html 例子 （基本包提供的功能集太有限了） 。
2. 勾选 editor 1。它使用默认的配置，所以所有包中可用的按钮、按键或样式都是有效的， 并且编辑器的内容也与最初加载的内容一样 （除了标准包中的很小细节--因为标准包不包括 Justify（调整版面）插件，页脚没有向右对齐） 。
3. 勾 选 editor 2。CKEDITOR.config.allowedContent 选项定义了允许内容规则使用字符串格式。注意到，因为这些规则不允许's'元素，删去（Strike Through）按钮从工具栏中被删除了， 并且文本中的删去格式化也被删除了。 对于带有水平线 （Horizontal Line） 、下标（Subscript）和上标（Superscript）功能的例子同样如此。再看一下 Styles 和 Format 下拉列表，仅含有允许内容规则中定义的项目。而且，在某些对话框中可用的选项也受到了限制。 例如， 图象对话窗口仅含有 URL、 替代文字 （AlternativeText） 、宽度和高度值，因为仅有这些属性在 CKEDITOR.config.allowedContent 中定义了。
4. 另外，editor 3 被配置为使用对象格式定义的不同规则集。

内容转换（Content Transformations ）

高级内容过滤器不仅可以删除不允许的 HTML 元素、它们的类、样式和属性，而且可以试着通过将元素从一种形式转换为另一种更喜欢的形式，从而统一输入数据。
考 虑加粗（Bold）功能。在 HTML 代码中，它可以用<strong>、 <b>，或者甚至 <span style="font-weight:700|800|900|bold"> 元素来表示。假设 CKEDITOR.config.allowedContent设置仅含有对<b>的规则。这是否意味着当解析<string> 或<span>元素时，会删除它们？
不会。编辑器会将它们都转换为<b>元素。结果是编辑器将只含有<b> 元素，并且会保留粘贴内容的可视化形式。 如果保留默认的 CKEDITOR.config.allowedContent 值 （在自动模式中） ，也同样如此--所有加粗的功能形式将被统一成偏爱的<strong>形式。
假设将 'img[!src,alt,width,height]'设置（<img>标记带有必需的 src 和三个可选的属性）添加到允许内容规则中。图像大小应该用属性来设置，因此，作为例子，用样式设置大小的粘贴图像将被转换成具有属性的图像（注意，不是所 有情况都可能--只有基于像素的大小可以被转换） 。
内容转换功能完全是自动的，不需要配置它。需要做的唯一的事情是设置CKEDITOR.config.allowedContent 选项，或使用默认的值（自动模式）目前， 我们只是为几个编辑器功能定义了内容转换， 但是在将来发布的版本中数量会增
加。

允许内容规则（Allowed Content Rules ）

注意：高级内容过滤器是在 CKEditor 4.1 中引入的。

简介

允 许内容规则定义了允许哪些 HTML 元素、属性、样式和类。当配置 CKEditor 时，你将对设置 CKEDITOR.config.allowedContent 选项最感兴趣。插件开发人员也需要设置CKEDITOR.config.allowedContent 属性，告诉编辑器在自动模式中一项功能所允许哪些内容。
允许内容规则通常包括四个主要部分：

• 允许的元素，
• 这些元素可以有的属性，
• 这些元素可以有的样式，
• 这些元素可以有的类。

注意： 替代书写 “属性(attributes)、 样式(styles)和类(classes)” ， 使用 “属性” （properties）作为简便的描述方法。
对于一个元素可以存在多项规则，一个元素可以被包含在多个元素列表中。例如，每一个规则可以允许另一元素属性集。
规则是一个一个地应用的。初始时，被过滤的元素是无效的，其所有属性都被拒绝。应用于该元素的第一条规则校验它（它不会被删除） ，并且该规则可能接受某些元素的属性。
另一条规则可能使编辑器接受更多的元素属性。因此：

• 如果一个元素不存在规则，则删除它。
• 可能接受一个元素，但拒绝其所有的属性，然后就被删除。
• 一旦被验证，一个元素和它的属性不能被另一规则使之失效。

字符串格式（String Format ）

字符串格式是允许内容规则的紧凑表示法，但它没有提供对象格式中可用的所有功能。
但是，在大多数情况下，应该够用了。
规则格式：elements [attributes]{styles}(classes)
正则表达式模板：

< elements >< styles, attributes, and classes >< separator >
/^([a-z0-9*\s]+)((?:\s*\{[!\w\-,\s\*]+\}\s*|\s*\[[!\w\-,\s\*]+\]\s*|\s*\([!\w\-,\s\*]+\)\s*){0,3})(?:;\s*|$)/i,

其中:

•  elements – 一列由空格分隔的元素名或一个星号（*）字符，
•  attributes –一列由逗号分隔的属性名或一个星号（*）字符，
•  styles –一列由逗号分隔的样式名或一个星号（*）字符，
•  classes –一列由逗号分隔的类或一个星号（*）字符，

特殊字符：

• 用于元素列表中的星号意思是： “该规则对所有元素接受后面的属性，但不是这些元素本身；必须有另一条规则显式地接受这些元素” 。
• 属性列表中的星号意思是： “接受所有属性” 。
• 用于属性列表中条目名前的感叹号（!） （如：[!href]）意思是： “此属性是必需的。如果一个元素不具有此属性，此规则不应应用于该元素（故此元素将不会由它得到验证） ” 。

例子：
// 一条规则接受<p>和<h1>元素，但没有任何属性。
p h1
//一条规则接受具有可选的"left"和 "right"类的<p>和<h1>元素
//注意：两个元素都可能含有这些类，而不仅仅是<h1>
p h1(left,right)
//一条规则接受具有其所有属性的<p>和<h1>元素
p h1[*]
//一条规则接受<a>，只有当它含有"href"属性时。
a[!href]
//一条规则接受<img>，它具有必需的"src"属性和一个可选的"alt"属性，加上可选的"width"和"height"样式
img[alt,!src]{width,height}
//与上面相同，因为属性的顺序和其清单是不相关的，并且忽略空格
img { height, width } [ !src, alt ]
允许内容规则集可以含有由分号（;）分隔的多条规则。如：
// 这些规则允许：
// 具有可选的"text-align"样式的<p 和><h1>元素
//具有必需的"href"属性的<a>
// <strong> 和 <em> 元素,
//具有可选的"tip"类的<p>（故<p>元素可以同时具有"text-align"样式和"tip"类）
p h1{text-align}; a[!href]; strong em; p(tip)
//这些规则允许：
// 具有可选的"id"属性的<p>和<h1>元素
//具有必需的"href"属性和可选的"id"属性的<a>
p h1; a[!href]; *[id]

调试

为了验证允许内容规则是否被正确解析了，可以检查 CKEDITOR.editor.filter 对象的CKEDITOR.filter.allowedContent 属性。
var editor = CKEDITOR.replace( 'textarea_id', {
allowedContent: 'a[!href]; ul; li{text-align}(someclass)'
} );
editor.on( 'instanceReady', function() {
console.log( editor.filter.allowedContent );
} );
// 这将对下列数组做日志：
// { elements: 'p br', ... } (默认编辑器规则)
// { elements: 'a', attributes: '!href' }
// { elements: 'ul' }
// { elements: 'li', styles: 'text-align', classes: 'someclass' }

对象格式（Object Format ）

为方便使用，允许内容规则可以定义成标准的对象字面量，故下面的：
allowedContent: 'p h1{text-align}; a[!href]; strong em; p(tip)'

与下面的相对应：

allowedContent: {
'p h1': {
styles: 'text-align'
},
a: {
attributes: '!href'
},
'strong em': true,
p: {
classes: 'tip'
}
}

采用此方法，允许内容规则可以由 JavaScript 动态地生成，并因任意目的存储成 JSON数据格式。注意：对象字面量的键必须是唯一的，因此：

allowedContent: {
p: {
14
styles: 'text-align'
},
p: {
classes: 'tip'
}
}

等价于：

allowedContent: 'p(tip)'

但永远不会是：

allowedContent: 'p{text-align}(tip)'