CODEWITHSUNDEEP
javascriptckeditor
Jon
Jon

Reputation: 379

Add buttons for custom styles to CKEditor

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?

Upvotes: 2

Views: 6248

Answers (1)

oleq
oleq

Reputation: 15895

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

Upvotes: 4

Related Questions