Customizing Ckeditor and adding a new toolbar button

It’s been a long time since i have put a blog entry. This time i will discuss how to customize a Ckeditor and how to  add new plugins(buttons in the toolbar) to the ckeditor. I got little help while googling. Hope this would be helpful.

Step 1: Download and install the Ckeditor js files. This link would get you setup a sample ckeditor in your local machine.

Step 2 : Customizing the toolbar:

We can specify which all toolbar buttons needs to be shown in our ckeditor. You can refer here for the toolbar definition.

Now we need to add a new button with a user defined functionality to our Ckeditor toolbar. In this example we are creating a button that wraps an anchor tag around a selected text inside the Ckeditor(same functionality as existing anchor button in the ckeditor).

Each button in the ckeditor toolbar is a plugin and their definitions are stored in ckeditor\plugins\ folder. In this folder we create a new folder with our plugin name. Here linkbutton. Inside the linkbutton folder we create a plugin.js file which contains the core functionality of the plugin/button.

It will contain the following code:-

(function(){
//Section 1 : Code to execute when the toolbar button is pressed
var a= {
exec:function(editor){
var theSelectedText = editor.getSelection().getNative();
CallCfWindow(theSelectedText);
}
},
//Section 2 : Create the button and add the functionality to it
b=’linkbutton’;
CKEDITOR.plugins.add(b,{
init:function(editor){
editor.addCommand(b,a);
editor.ui.addButton(‘linkbutton’,{
label:’Link Button’,
icon: this.path + ‘logo_ckeditor.png’,
command:b
});
}
});
})();
Note in the above code in Section 1  var a will contain the functionality to execute when the button is pressed. Here we are creating a coldfusion window and pass the selected text from the ckeditor. In Section 2 we create the button and add the functionality to it. We also give the path of the image that needs to be shown in the toolbar for the button. Here it is logo_ckeditor.png and is inside the linkbutton folder.
Next open the ckeditor/ckeditor.js file and search for ‘about‘ in the file. It will find a place where all the plugins are registered. Add your plugin name(here linkbutton) here.
UPDATE: Actually you don’t need to edit the ckeditor.js file as this will not work when a newer version comes. You can instead edit the config.js and add the plugin name there.
config.extraPlugins = ‘pluginX,pluginY,yourPluginNameHere’;
Go to this link for more reference.
Now open the ckeditor/config.js file and add your plugin name (here linkbutton) to the toolbar definition.
Note: The name given for the plugin should be consistent everywhere. The folder structure will look as below:-
That’s it!! We created a new plugin for our Ckeditor. For wrapping the anchor tag around the selected text we use the following code:-
function FormatEditorText()
{
var myEditor = CKEDITOR.instances.editor1;
var theSelectedText = document.getElementById(‘txtSelected’).value;
var theAnchorText = document.getElementById(‘txtAnchor’).value;
var FormattedText = ‘<a href=”‘+theAnchorText+'”>’+theSelectedText+'</a>’;
myEditor.insertHtml(FormattedText);
}
Helpful links :
http://cksource.com/forums/viewtopic.php?f=11&t=16306&hilit=+get+name+toolbar+button
http://cksource.com/forums/viewtopic.php?f=11&t=16149&hilit=get+selected+text&sid=ebf293139b6f0777b285369a136ae819
http://blog.tommed.co.uk/2009/09/07/how-to-create-a-ckeditor-v3-plugin
http://cksource.com/forums/viewtopic.php?f=11&t=15539&hilit=creating+a+custom+button
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html
http://syrinx.ph/articles/CkEditorPluginGuide.aspx
I will post a live sample soon ;-).