将自定义样式的按钮添加到CKEditor

Question

CKEditor lets you add custom styles to the styles combo box by editing the file styles.js (see What is a good javascript HTML editor for adding custom HTML elements? for details)

I would like to add unique buttons to the toolbar to apply my custom styles, rather than the user having to select them from the styles combo.

How do you add custom buttons to the CKEditor toolbar?

Answer 1

Go ahead with the following code:

// 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'
            } );
        }
    }
} );