如何自定义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;';
            }
        }
    });
} );