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

ken*_*ter 26 ckeditor

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

  • 我只需要在CKEditor中使用某些标签:list标签,break标签等......

  • 我可以在CKEditor中定义它们并禁用其他标签吗?

小智 24

您可以使用一些设置.您可以定义这些设置,编辑ckeditor根目录中的config.js文件.例如,如果你想像我一样激进,你可以把:

config.forcePasteAsPlainText = true;
Run Code Online (Sandbox Code Playgroud)

如果你只想像你说的那样只限制某些标签,我发现下面的设置:

config.removeFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd';
Run Code Online (Sandbox Code Playgroud)

只有当用户执行"删除格式"命令时才会执行最后一个操作.更多信息:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags

考虑到所有的时间,我认为你已经找到了答案,但其他人可以得到帮助.


Pau*_*lin 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;
                        },
                    }
                });
            });
Run Code Online (Sandbox Code Playgroud)


Alf*_*oML 6

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

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


Nen*_*lep 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)";
Run Code Online (Sandbox Code Playgroud)