How to add a custom button to the toolbar that calls a JavaScript function?

Also there is a nice way allowing one to add the button without creating plugin.

html:

<textarea id="container">How are you!</textarea>

javascript:

editor = CKEDITOR.replace('container'); // bind editor

editor.addCommand("mySimpleCommand", { // create named command
    exec: function(edt) {
        alert(edt.getData());
    }
});

editor.ui.addButton('SuperButton', { // add new button and bind our command
    label: "Click me",
    command: 'mySimpleCommand',
    toolbar: 'insert',
    icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});

Check out how it works here: DEMO

I am in the process of developing a number of custom Plugins for CKEditor and here's my survival pack of bookmarks:

A StackOverflow post linking to and talking about a plugins tutorial that got me started (Tim Down already mentioned this)
A number of ready-made plugins for FCK and CKEditor that may improve one's understanding of the system
The Blog of AlfonsoML, one of the developers, lots of valuable stuff there, e.g. Plugin localization in CKEditor
Interaction between dialog buttons and a IFrame dialog, with input from Garry Yao, one of the developers
The forums are not as bad as they look, there are some hidden gems there. Make sure you search there, well, if not first, then at least second or third.

For your purpose, I would recommend look at one of the plugins in the _source/plugins directory, for example the "print" button. Adding a simple Javascript function is quite easy to achieve. You should be able to duplicate the print plugin (take the directory from _source into the actual plugins/ directory, worry about minification later), rename it, rename every mention of "print" within it, give the button a proper name you use later in your toolbar setup to include the button, and add your function.

How to add a custom button to the toolbar that calls a JavaScript function?

Related

Recent Posts