javascript - 如何自定义ckeditor工具栏按钮行为？

Question

在 ckeditor 4.0.1 中，当“文本方向从左到右”工具栏按钮被按下时，我输入 hello，生成的 HTML 源是:

<p dir="ltr">hello</p>

我怎样才能改变这种行为，使生成的源看起来像:

<p dir="ltr" style="text-align: left;">hello</p>

提前致谢。

Answer 1

您可以使用 dataProcessor 执行此操作:

CKEDITOR.replace( 'editor1', {
    on: {
        instanceReady: function () {
            this.dataProcessor.htmlFilter.addRules( {
                elements: {
                    p: function( element ) {
                        if ( element.attributes.dir == 'ltr' )
                            element.attributes.style = 'text-align: left;';
                    }
                }
            });
        }
    }
} );

也可以全局添加:

CKEDITOR.on( 'instanceReady', function ( event ) {
    event.editor.dataProcessor.htmlFilter.addRules( {
        elements: {
            p: function( element ) {
                if ( element.attributes.dir == 'ltr' )
                    element.attributes.style = 'text-align: left;';
            }
        }
    });
} );