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

Question

I would like to add a button to a toolbar that calls a JavaScript function like Tada() ?

Any ideas on how to add this?

Answer 1

I am developing a number of custom plugins for CKEditor, and here is my bookmark survival package:

• https://stackoverflow.com/questions/90876/ ... (Tim Down already mentioned this)
• A number of plug-ins for FCK and CKEditor that can improve one understanding of the system.
• AlfonsoML blog, one of the developers, there are many valuable things, for example. Localization of plugins in CKEditor
• The interaction between the dialog buttons and the IFrame dialog , with input from Harry Yao, one of the developers
• forums are not as bad as they look, there are some hidden stones. Make sure you're looking there, well, if not the first, then at least the second or third.

For your purpose, I would recommend looking at one of the plugins in the _source/plugins directory, for example the "print" button. Adding a simple Javascript function is pretty easy. You should be able to duplicate the print plugin (take the directory from _source to the actual plugins / directory, worry about the thumbnail later), rename it, rename every mention of “print” inside it, give the button the correct name that you use later in the toolbar setting, to turn on the button and add your function.

Answer 2

There is also a good way to add a button without creating a 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' }); 

See how it works here: DEMO

Answer 3

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

There are several steps:

1) create a plugins folder

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

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

3) create 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

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

Here is the .js plugin:

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

Answer 5

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

Answer 6

You can add a 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 a real plugin with all the steps described.

Answer 7

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

There are code samples and a step-by-step guide to creating your own CKEditor plugin using a custom button.

Answer 8

Ckeditor 4

The official documentation of CKEditor 4 has convenient guides that describe how to create a plugin that inserts content into an editor, registers a button, and displays a dialog box:

• Creating a CKEditor 4 plugin in 20 lines of code
• Creating a Simple CKEditor Plugin

If you read these two, go to Integrating Plugin with Advanced Content Filter .

Ckeditor 5

There is still one article available:

CKEditor 5 Framework: Quick Start - Creating a Simple Plugin