将 CKEditor 高级内容过滤器应用于字符串
Posted
技术标签:
【中文标题】将 CKEditor 高级内容过滤器应用于字符串【英文标题】:Apply CKEditor Advanced Content Filter to a string 【发布时间】:2014-04-09 21:31:51 【问题描述】:如何将 CKEditor 的高级内容过滤器应用于字符串?
我正在尝试使用 editor.on('paste', ...) 截取粘贴的内容,获取其 ACF 过滤值,然后将我自己的转换应用于过滤值。过了这点,再跑一遍ACF就好了。
【问题讨论】:
【参考方案1】:我最近报告了一张我认为您会感兴趣的票:http://dev.ckeditor.com/ticket/11621。这个功能很有可能会在 CKEditor 4.5 中引入。 (编辑:此功能在 CKEditor 4.5 - CKEDITOR.config.pasteFilter
)。
至于您的问题 - 要将 ACF 应用于 html 字符串,您需要:
-
使用
CKEDITOR.htmlParser.fragment.fromHtml()
解析它。
在上一步中创建的文档片段上调用filter.applyTo
。您可以使用标准的editor.filter
,也可以使用不同的设置创建自己的实例。
将文档片段序列化回 HTML 字符串。
例如:
// Create standalone filter passing 'p' and 'b' elements.
var filter = new CKEDITOR.filter( 'p b' ),
// Parse HTML string to pseudo DOM structure.
fragment = CKEDITOR.htmlParser.fragment.fromHtml( '<p><b>foo</b> <i>bar</i></p>' ),
writer = new CKEDITOR.htmlParser.basicWriter();
filter.applyTo( fragment );
fragment.writeHtml( writer );
writer.getHtml(); // -> '<p><b>foo</b> bar</p>'
【讨论】:
非常有帮助!非常感谢!【参考方案2】:基于@Reinmar 的回答,如果您希望应用某些不允许的规则并可选择对粘贴事件做出反应。
CKEDITOR.on('instanceReady', function(ev)
ev.editor.on('paste', function(evt)
// Standalone filter based off the existing filter.
// If the editor is removed, so it our custom filter object.
// We don't need to pass an editor however.
// @see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html
var filter = new CKEDITOR.filter(evt.editor);
// Allow all content.
// @see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html#special-features
// Don't set filter.allowedContent property directly, doesn't work.
var allowed = filter.allow(
'$1':
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
);
if (allowed === false)
console.warn('An error occured setting the custom rules.');
return;
// Now disllow color attribute & colour background-color, text-decoration styles.
// Format "elements [attributes, attr2]styles(classes)"."
// Default is '*[color]; *color, background-color, text-decoration'.
filter.disallow('*[color]; *color, background-color, text-decoration');
// Filter it now.
var fragment = CKEDITOR.htmlParser.fragment.fromHtml(evt.data.dataValue);
var writer = new CKEDITOR.htmlParser.basicWriter();
filter.applyTo(fragment);
fragment.writeHtml(writer);
var processed_html = writer.getHtml();
// Set the value of what will be pasted.
evt.data.dataValue = processed_html;
console.log('Content filtered.');
// Clean up - free up memory.
filter.destroy();
);
);
【讨论】:
以上是关于将 CKEditor 高级内容过滤器应用于字符串的主要内容,如果未能解决你的问题,请参考以下文章