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

by

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

More Related Contents:

  1. Get computed font size for DOM element in JS
  2. How to enable image upload support in CKEditor 5?
  3. Set cursor to specific position in CKEditor
  4. How to ajax-submit a form textarea input from CKEditor?
  5. Change form values after submit button pressed
  6. CKEditor instance already exists
  7. How do I set a value in CKEditor with Javascript?
  8. Getting selected text with CKEditor Plugin on IE
  9. CKEditor unwanted   characters
  10. CKEditor: Class or ID for editor body
  11. How to strip type from Javascript FileReader base64 string?
  12. jQuery Popup Bubble/Tooltip [closed]
  13. How to disable trimming of inputs in AngularJS?
  14. AngularJS using $rootScope as a data store
  15. Emulate/polyfill history.pushstate() in IE
  16. Is there a javascript equivalent to using @media query? [duplicate]
  17. Issue with JSON.stringify adding a extra \ and “” to my Json object
  18. How to make a submit button display as a link?
  19. Load ajax when scroll reaches 80%
  20. Properly Create and Serve PDF Blob via HTML5 File and URL APIs
  21. How can I execute a script after calling window.location.href?
  22. Extracting the exponent and mantissa of a Javascript Number
  23. How to read a properties file in javascript from project directory?
  24. ReferenceError can’t find variable: $ [duplicate]
  25. jQuery add class based on page URL
  26. Variable hoisting in javascript
  27. What are the implications of the recursive joining of Promises in terms of Monads?
  28. Sort firebase data in descending order using negative timestamp
  29. Why is there no logical XOR?
  30. Javascript textarea undo redo

Leave a Comment