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

javascript ckeditor
AnApprentice picture AnApprentice · Dec 24, 2009 · Viewed 120.6k times · Source

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

MadisonTrash picture MadisonTrash · Aug 22, 2014

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

Related questions

CKEditor instance already exists

I am using jquery dialogs to present forms (fetched via AJAX). On some forms I am using a CKEditor for the textareas. The editor displays fine on the first load. When the user cancels the dialog, I am removing the …

Read More
Getting the textarea value of a ckeditor textarea with javascript

I'm a learner as far as JS goes and although I've spent a good few hours reading through tutorials which has helped lots but I'm still having problems figuring out exactly how I find out what a user is typing …

Read More
How do I set a value in CKEditor with Javascript?

I am wondering how I can set a value in CKEditor using Javascript? I have tried the following, but neither of them work... document.[form name].[textarea name].value=data; $('#textareaID').val(data); However, both these work without the …

Read More