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

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

Any ideas on how to add this?

You can add the button image as follows:

CKEDITOR.plugins.add('showtime',   //name of our plugin
{    
    requires: ['dialog'], //requires a dialog window
    init:function(a) {
  var b="showtime";
  var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
  c.modes={wysiwyg:1,source:1}; //Enable our plugin in both modes
  c.canUndo=true;
 
  //add new button to the editor
  a.ui.addButton("showtime",
  {
   label:'Show current time',
   command:b,
   icon:this.path+"showtime.png"   //path of the icon
  });
  CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file
 }
});

Here is the actual plugin with all steps described.

CKEditor 4

There are handy tutorials in the official CKEditor 4 documentation, that cover writing a plugin that inserts content into the editor, registers a button and shows a dialog window:

• Creating a CKEditor 4 Plugin in 20 Lines of Code
• Creating a Simple CKEditor Plugin

If you read these two, move on to Integrating Plugins with Advanced Content Filter.

CKEditor 5

So far there is one introduction article available:

CKEditor 5 Framework: Quick Start - Creating a simple plugin

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

var editor = CKEDITOR.replace("da_html", {_x000D_
  disableNativeSpellChecker: false,_x000D_
  toolbar: [{_x000D_
      name: "clipboard",_x000D_
      items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"]_x000D_
    },_x000D_
    "/",_x000D_
    {_x000D_
      name: "basicstyles",_x000D_
      items: ["Italic"]_x000D_
    },_x000D_
    {_x000D_
      name: "paragraph",_x000D_
      items: ["BulletedList"]_x000D_
    },_x000D_
    {_x000D_
      name: "insert",_x000D_
      items: ["Table"]_x000D_
    },_x000D_
    "/",_x000D_
    {_x000D_
      name: "styles",_x000D_
      items: ["Styles", "Format", "Font", "FontSize"]_x000D_
    },_x000D_
    {_x000D_
      name: "colors",_x000D_
      items: ["TextColor", "BGColor"]_x000D_
    },_x000D_
    {_x000D_
      name: "tools",_x000D_
      items: ["Maximize", "saveButton"]_x000D_
    },_x000D_
  ]_x000D_
});_x000D_
_x000D_
editor.addCommand("mySaveCommand", { // create named command_x000D_
  exec: function(edt) {_x000D_
    alert(edt.getData());_x000D_
  }_x000D_
});_x000D_
_x000D_
editor.ui.addButton("saveButton", { // add new button and bind our command_x000D_
  label: "Click me",_x000D_
  command: "mySaveCommand",_x000D_
  toolbar: "insert",_x000D_
  icon: "https://i.stack.imgur.com/IWRRh.jpg?s=328&g=1"_x000D_
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="http://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>_x000D_
_x000D_
<textarea id="da_html">How are you!</textarea>

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

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)

In case anybody is interested, I wrote a solution for this using Prototype. In order to get the button to appear correctly, I had to specify extraPlugins: 'ajaxsave' from inside the CKEDITOR.replace() method call.

Here is the plugin.js:

CKEDITOR.plugins.add('ajaxsave',
{
    init: function(editor)
    {
    var pluginName = 'ajaxsave';

    editor.addCommand( pluginName,
    {
        exec : function( editor )
        {
            new Ajax.Request('ajaxsave.php',
            {
                method:     "POST",
                parameters: { filename: 'index.html', editor: editor.getData() },
                onFailure:  function() { ThrowError("Error: The server has returned an unknown error"); },
                on0:        function() { ThrowError('Error: The server is not responding. Please try again.'); },
                onSuccess:  function(transport) {

                    var resp = transport.responseText;

                    //Successful processing by ckprocess.php should return simply 'OK'. 
                    if(resp == "OK") {
                        //This is a custom function I wrote to display messages. Nicer than alert() 
                        ShowPageMessage('Changes have been saved successfully!');
                    } else {
                        ShowPageMessage(resp,'10');
                    }
                }
            });
        },

        canUndo : true
    });

    editor.ui.addButton('ajaxsave',
    {
        label: 'Save',
        command: pluginName,
        className : 'cke_button_save'
    });
    }
});

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

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
            });
        }
    }); 
})();

You'll need to create a plug-in. The documentation for CKEditor is very poor for this, especially since I believe it has changed significantly since FCKEditor. I would suggest copying an existing plug-in and studying it. A quick google for "CKEditor plugin" also found this blog post.

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.