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");
                }
            }
        });
});

但是，它不会插入属性。

我是不是做错了什么？

Answer 1

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

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

您还应该习惯Allowed Content Filter，因为您很可能需要对其进行配置，以使编辑器正常工作，即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';
                    }
                }
            } );              
        }
    }
} );