CKEditor - 添加自定义属性

Question

在CKEditor中，我遇到了添加一些dataProcessor规则的问题。

我定义了一个自定义插件，在ckeditor/plugsin/x中。我将插件名称添加到了config.js extraPlugins中。

我的插件看起来像：

CKEDITOR.plugins.add('x',   
  {    

    init:function(editor)
    { 
        editor.dataProcessor.htmlFilter.addRules(
        {
            elements :
            {
                div : function( element )
                {
                    element.setAttribute("x","y");
                }
            }
        });

        editor.dataProcessor.dataFilter.addRules(
        {
            elements :
            {
                div : function( element )
                {
                    element.setAttribute("x","y");
                }
            }
        });

});

然而它并没有插入该属性。

我做错了什么吗？

- IanWatson

---

我已经尝试了另一个插件，使用了http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin上的示例代码，但这也无法正常工作。 - IanWatson

Answer 1

CKEDITOR.dataProcessor 使用 CKEDITOR.htmlParser.element 而不是 CKEDITOR.dom.element。 CKEDITOR.htmlParser.element 不是真正的 DOM 元素，而是一个抽象对象，使解析和过滤更容易。它具有自己的方法和属性。

还要注意，dataFilter 用于输入数据（编辑器接受的内容），而 htmlFilter 处理输出数据（编辑器生成的内容）。

您还应该熟悉 允许的内容过滤器，因为很可能需要配置它才能使编辑器正常工作，例如 config.extraAllowedContent = 'div[x]'。

请参见演示。

CKEDITOR.replace( 'editor', {
    extraAllowedContent: 'div',
    on: {
        pluginsLoaded: function() {
            this.dataProcessor.dataFilter.addRules( {
                elements: {
                    div: function( el ) {
                        console.log( 'processing', el, 'in dataFilter' );
                        el.attributes.datafilter = 'x';
                    }
                }
            } );    

            this.dataProcessor.htmlFilter.addRules( {
                elements: {
                    div: function( el ) {
                        console.log( 'processing', el, 'in htmlFilter' );
                        el.attributes.htmlfilter = 'y';
                    }
                }
            } );              
        }
    }
} );

- oleq

---

在你的例子中一切都很正常，但是在Drupal中我遇到了麻烦。针对 "span: function"，它能够正常工作，但是对于 "div: function"，它无法正常工作。可能会有一些限制吗？或者有一些选项导致了这个问题？谢谢。 - Eugene

@Eugene 你的编辑器中允许使用 div 吗 (CKEDITOR.instances.editor.filter.check( 'div' ))？ - oleq

请检查此链接 https://jsfiddle.net/nbzrdsq2/6/，它无法与属性 contenteditable="false" 一起使用。 - Eugene

看起来我解决了这个问题 https://jsfiddle.net/nbzrdsq2/8/ 我添加了选项 applyToAll: true - Eugene