如何在CKEditor中定义允许使用的标签？

Question

如何在CKEditor中定义允许使用的标签？

ckeditor

27

有时用户会从不同的来源复制粘贴文本到CKEditor中，但我想限制他们可以复制到CKEditor中的标签。
我只需要在CKEditor中使用特定的标签：列表标签、换行标签等等...
我能否定义它们并禁用CKEditor中的其他标签？

- kenpeter

CKEditor 4拥有一个全新（花哨）的标签过滤系统：http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter - Eli

6个回答

7

我这样做是为了确保没有人能在编辑器中放置一个<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;
                        },
                    }
                });
            });

- Paul Tomblin

1

更多关于此的信息请参见：http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor - Eli

6

你可以使用白名单插件在配置中定义允许的元素和属性列表，并拒绝其他任何内容。

这基本上是Paul Tomblin提出的相同解决方案，但应该更容易处理更多的元素，而不是复制大量代码，而且它使用白名单而不是黑名单，因此不允许的任何内容都将被删除。

- AlfonsoML

提供插件作为开源的好处在于您可以改进它，甚至可以支付他人来完成您需要的工作。即使用户拖放某些内容，输出也将保持清洁，因此这只是一个部分性的错误，我们可以说问题在于CKEditor没有像粘贴一样钩住拖放操作。 - AlfonsoML

是的，我想我还是会使用它，谢谢。至于修复它，看起来并不容易，因为这个 ckeditor bug 已经在 "wontfix" 中关闭了：http://dev.ckeditor.com/ticket/5473。 - Damien

5

我想补充一下，自从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 h1{text-align}; a[!href]; strong em; p(tip)";

- Joel Peltonen

3

我直接将有限的html标签应用于粘贴操作，使用了phpjs.org的strip_tags方法。

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 : '';
   });
}

- Kato

1

这是对HTML的正则表达式解析吗？ - Joel Peltonen

嘻嘻！天哪！可能吗？地球上的罪恶。实际上，这是HTML剥离而不是解析，这是正则表达式值得庆幸非常适合的一个目的。 - Kato

对于 CKEditor 4，将 evt.data['html'] 替换为 event.data.dataValue。 - user570605

2

CKEDITOR.config.fullPage = false

指示要编辑的内容是否作为完整的HTML页面输入。完整页面包括<html>，<head>和<body>元素。最终输出也将反映此设置，仅在禁用此设置时包括<body>内容。

- basit raza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafael Berlanda · Accepted Answer

有一些设置可以使用。您可以通过编辑 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

考虑到所有的时间，我认为你已经找到了答案，但其他人可能会受益。