如何在 CKEditor 中定义允许的标签？
Posted
技术标签:
【中文标题】如何在 CKEditor 中定义允许的标签？【英文标题】：How to define allowed tags in CKEditor? 【发布时间】：2011-02-24 03:55:13 【问题描述】：有时用户将文本从不同来源复制并粘贴到 CKEditor，但我想限制他们可以复制到 CKEditor 的标签。
我只需要在CKEditor中使用某些标签：列表标签、中断标签等...
我可以在 CKEditor 中定义它们并禁用其他标签吗？
【问题讨论】：
CKEditor 4 有一个全新的（花哨的）标签过滤系统：docs.ckeditor.com/#!/guide/dev_advanced_content_filter 【参考方案1】：您可以使用一些设置。您可以在 ckeditor 的根目录中编辑 config.js 文件来定义这些设置。例如，如果你想像我一样激进，你可以说：
config.forcePasteAsPlainText = true;
如果你只想像你说的那样限制某些标签，我找到了下面的设置：
config.removeFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd';
只有在用户执行“删除格式”命令时才会完成最后一项。 更多信息：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags
考虑到一直以来，我认为您已经找到了答案，但可以帮助其他人。
【讨论】：
forcePasteAsPlainText 并不总是有效，请参阅dev.ckeditor.com/ticket/756【参考方案2】：我这样做只是为了确保没有人可以在编辑器中添加<input> 标签。它可能会扩展到其他标签：
CKEDITOR.on('instanceReady', function(ev)
var editor = ev.editor;
var dataProcessor = editor.dataProcessor;
var htmlFilter = dataProcessor && dataProcessor.htmlFilter;
htmlFilter.addRules(
elements :
input: function(element)
return false;
,
);
);
【讨论】：
更多信息在这里：docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor【参考方案3】：我使用 phpjs.org 中的 strip_tags 方法将有限的 html 标签选择直接应用于粘贴操作。
CKEDITOR.on('instanceReady', function(ev)
ev.editor.on('paste', function(evt)
evt.data['html'] = strip_tags(evt.data['html'],
'<i><em><b><strong><blockquote><p><br><div><ul><li><ol>' // allowed list
);
);
);
function strip_tags (input, allowed)
// http://phpjs.org/functions/strip_tags (http://kevin.vanzonneveld.net)
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1)
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
);
【讨论】：
那是HTML的正则表达式解析吗？ 嘻嘻！我的天啊！可以吗？人间罪孽。实际上，它是剥离 HTML，而不是解析，这是 regex 非常适合的用途之一。 对于 ckeditor 4 将evt.data['html'] 替换为 event.data.dataValue【参考方案4】：
您可以使用whitelist plugin 在您的配置中定义允许和拒绝其他任何内容的元素和属性列表。
这与 Paul Tomblin 提出的解决方案基本相同，但它应该更容易处理更多元素而不是复制大量代码，并且它使用白名单而不是黑名单，因此任何不允许的内容都会被删除。
【讨论】：
将插件作为开源提供的好处应该是您可以改进它，甚至可以花钱请人做您需要的事情。即使用户拖放某些东西，输出也会保持干净，所以这只是一个部分错误，我们可以说问题是 CKEditor 没有像粘贴那样挂钩拖放。 是的，我想我还是会使用它，谢谢。至于修复它，看到这个 ckeditor 错误在“wontfix”关闭似乎并不容易：dev.ckeditor.com/ticket/5473。【参考方案5】：CKEDITOR.config.fullPage = false
指示要编辑的内容是否作为完整的 HTML 页面输入。整页包括<html>、<head> 和<body> 元素。最终输出也将反映此设置，包括 <body> 内容，仅当此设置被禁用时。
【讨论】：
【参考方案6】：要添加我的输入，从 4.1 开始就有高级内容过滤器功能，它允许对允许的内容（哪些标签以及它们的样式/属性/类）进行非常具体的规则。我发现它非常强大并且配置非常好。
在http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter 上阅读更多信息，但这里有一些来自页面的示例
config.allowedContent = true; // to allow all
// A rule accepting <p> and <h1> elements with optional "left" and "right" classes.
// Note: Both elements may contain these classes, not only <h1>.
config.allowedContent = "p h1(left,right)";
// Rules allowing:
// * <p> and <h1> elements with an optional "text-align" style,
// * <a> with a required "href" attribute,
// * <strong> and <em> elements,
// * <p> with an optional "tip" class (so <p> element may contain
// a "text-align" style and a "tip" class at the same time).
config.allowedContent = "p h1text-align; a[!href]; strong em; p(tip)";
【讨论】：
以上是关于如何在 CKEditor 中定义允许的标签？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误
根据Selection - CKEditor更新RichCombo的标签
如何将“target”属性添加到ckeditor5中的`a`标签？
您如何定义 CKEditor 用于搜索配置/语言文件的路径？