CKEditor示例 »数据过滤和功能激活

此样本页面演示了高级内容过滤器的概念 (ACF),精致 控制编辑器接受哪些类型的数据以及什么内容的工具 产生了一种输出。

什么时候以及什么被过滤?

ACF 控制项 每个数据源 到编辑器。 它处理手动插入的两个HTML(即由用户粘贴) 和程序上类似:

editor.setData( '<p>Hello world!</p>' );

ACF 丢弃无效的 无用的HTML标记和属性,因此编辑器在执行过程中保持“干净” runtime. ACF 行为 可以针对特定情况进行配置和调整,以防止 输出HTML(即在CMS系统中)不受污染。 这种过滤是客户端的第一道防线 against "标签汤”, 精确限制哪些标签,属性和样式的工具 允许(期望)。正确配置后, ACF 是生成高质量,有意过滤的HTML的简便方法。

如何配置或禁用ACF?

默认情况下,高级内容过滤器处于启用状态,并且在“自动模式”下工作 它提供了一组简单的规则,允许调整过滤规则 并在必要时禁用整个功能。 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'
} );

以下规则可能需要其他说明:

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 进入这个编辑器(比如说一个列表),它将自动 转换为纯文本。

阿波罗11号 是首批人类登陆的太空飞行 尼尔阿姆斯特朗巴斯·奥尔德林于1969年7月20日,世界标准时间20:18登上月球。