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

Question

I'd like to add a button to the toolbar that calls a JavaScript function like Tada()?

Any ideas on how to add this?

Answer 1

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