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

Question

• 有时用户将文本从不同来源复制并粘贴到 CKEditor，但我想限制他们可以复制到 CKEditor 的标签。

  有时用户将文本从不同来源复制并粘贴

• 我只需要在 CKEditor 中使用某些标签：列表标签、中断标签等...

• < p>我可以定义它们吗？禁用 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

我这样做只是为了确保没有人可以在编辑器中放置 标签。它可能可以扩展到其他标签：

            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

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

它基本上与 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 页面输入。完整页面包括 、 和 元素。最终输出也将反映此设置，仅当禁用此设置时才包括 内容。