CKEditor lets you add custom styles to the styles bo 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 bo.

How do you add custom buttons to the CKEditor toolbar?

CKEditor lets you add custom styles to the styles bo 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 bo.

How do you add custom buttons to the CKEditor toolbar?

• javascript
• ckeditor

1 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 mand and button along with other plugins.
        pluginsLoaded: function() {
            var editor = this;

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

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