Question

有时用户会将来自不同来源的文本复制并粘贴到CKEditor，但我想限制他们可以复制到CKEditor的标签。
我只需要在CKEditor中使用某些标签：list标签，break标签等......
我可以定义它们吗？禁用CKEditor中的其他标签？

Answer 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

一直在考虑，我认为你已经找到了答案，但其他人可以得到帮助。

Answer 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;
                        },
                    }
                });
            });

Answer 3

您可以使用whitelist plugin在配置中定义允许的元素和属性列表，并拒绝其他任何内容。

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

Answer 4

为了添加我的输入，自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)";

Answer 5

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

Answer 6

CKEDITOR.config.fullPage = false

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

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

6 个答案: