javascript - 向 CKEditor 添加自定义样式的按钮

Question

CKEditor 允许您通过编辑 styles.js 文件将自定义样式添加到样式组合框(有关详细信息，请参阅 What is a good javascript HTML editor for adding custom HTML elements?)

我想向工具栏添加独特的按钮来应用我的自定义样式，而不是用户必须从样式组合中选择它们。

如何向 CKEditor 工具栏添加自定义按钮？

Answer 1

继续执行以下代码:

// Your custom style.
var myStyle = new CKEDITOR.style( {
    element: 'span',
    attributes: {
        'data-foo': 'bar',
        'class': 'myClass'
    },
    styles: {
        color: 'red'
    }
} );

CKEDITOR.replace( 'editor1', {
    on: {
        // Register command and button along with other plugins.
        pluginsLoaded: function() {
            var editor = this;

            // Registers a command that applies the style.
            // Note: it automatically adds Advanced Content Filter rules.
            this.addCommand( 'myStyle', new CKEDITOR.styleCommand( myStyle ) );

            // Add toolbar button for this command.
            this.ui.addButton && this.ui.addButton( 'myStyleButton', {
                label: 'My style',
                command: 'myStyle',
                toolbar: 'insert,10'
                // You may want to set some icon here.
                // icon: 'someIcon'
            } );
        }
    }
} );