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

This article may be useful too http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

There are code samples and step-by-step guide about building your own CKEditor plugin with custom button.

Answer 2

If you have customized the ckeditor toolbar then use this method:

var editor = CKEDITOR.replace("da_html", {
  disableNativeSpellChecker: false,
  toolbar: [{
      name: "clipboard",
      items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"]
    },
    "/",
    {
      name: "basicstyles",
      items: ["Italic"]
    },
    {
      name: "paragraph",
      items: ["BulletedList"]
    },
    {
      name: "insert",
      items: ["Table"]
    },
    "/",
    {
      name: "styles",
      items: ["Styles", "Format", "Font", "FontSize"]
    },
    {
      name: "colors",
      items: ["TextColor", "BGColor"]
    },
    {
      name: "tools",
      items: ["Maximize", "saveButton"]
    },
  ]
});

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

editor.ui.addButton("saveButton", { // add new button and bind our command
  label: "Click me",
  command: "mySaveCommand",
  toolbar: "insert",
  icon: "https://i.stack.imgur.com/IWRRh.jpg?s=328&g=1"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>

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

Working code in jsfiddle due to some security issue of stackoverflow: http://jsfiddle.net/k2vwqoyp/

Answer 3

See this URL for a easy example http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/

There are a couple of steps:

1) create a plugin folder

2) register your plugin (the URL above says to edit the ckeditor.js file DO NOT do this, as it will break next time a new version is relased. Instead edit the config.js and add a line like so

config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere'; 

3) make a JS file called plugin.js inside your plugin folder Here is my code

(function() {
    //Section 1 : Code to execute when the toolbar button is pressed
    var a = {
        exec: function(editor) {
            var theSelectedText = editor.getSelection().getNative();
            alert(theSelectedText);
        }
    },

    //Section 2 : Create the button and add the functionality to it
    b='addTags';
    CKEDITOR.plugins.add(b, {
        init: function(editor) {
            editor.addCommand(b, a);
            editor.ui.addButton("addTags", {
                label: 'Add Tag', 
                icon: this.path+"addTag.gif",
                command: b
            });
        }
    }); 
})();

Answer 4

There might be Several plugins but one may use CSS for creating button. First of all click on Source button mentioned in Editor then paste the button code over there, As I use CSS to create button and added href to it.

<p dir="ltr" style="text-align:center"><a href="https://play.google.com/store/apps/details?id=com.mobicom.mobiune&hl=en" style="background-color:#0080ff; border: none;color: white;padding: 6px 20px;text-align: center;text-decoration: none;display: inline-block;border-radius: 8px;font-size: 15px; font-weight: bold;">Open App</a></p>

This is the Button Written Open App over It. You May change the Color as i am using #0080ff (Light Blue)