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

Share Improve this question Follow edited May 23, 2017 at 10:25 CommunityBot 111 silver badge asked Aug 5, 2013 at 9:08 JonJon 37911 gold badge77 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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