CODEWITHSUNDEEP
javascriptjqueryckeditor
CAM
CAM

Reputation: 15

ckeditor 4 jQuery Adapter, How to add a custom button?

code 0:

$editor.ckeditor(function () {
    var editor = this;
    editor.ui.add('MyButton', CKEDITOR.UI_BUTTON, {
        label: 'My Button',
        command: 'test'
    });
}, {toolbar: [['MyButton']]});

code 1:

var editor = CKEDITOR.replace('editor', {toolbar: [['MyButton']]});
editor.ui.add('MyButton', CKEDITOR.UI_BUTTON, {
    label: 'My Button',
    command: 'test'
});

[code 1] is OK, normal to show at toolbar, but [code 0] is not work, how to use jQuery Adapter to add custom button??

updated [code 0]:

$editor.ckeditor(function () {
    var editor = this;
    editor.on('pluginsLoaded', function(event) {
        editor.ui.add('MyButton', CKEDITOR.UI_BUTTON, {
            label: 'My Button',
            command: 'test'
        });
    });
}, 
 {
    customConfig: '/ckeditor-config.js'
});

Upvotes: 0

Views: 892

Answers (1)

oleq
oleq

Reputation: 15895

Use pluginsLoaded event (jsFiddle):

$( 'textarea' ).ckeditor( {
         on: {
            pluginsLoaded: function() {
                this.ui.add('MyButton', CKEDITOR.UI_BUTTON, {
                    label: 'My Button',
                    command: 'test'
                } );

                console.log( this.name + ' plugins ready!' );
            }
        },
        toolbar: [['MyButton']]
    }, 
    function( textarea ) {
        console.log( this.name + ' instance ready!' );
} );

Upvotes: 2

Related Questions