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 ;-).
About these ads

15 Comments (+add yours?)

  1. Prasanth
    Dec 17, 2009 @ 16:57:13

    Good post. Let me try to do this.

    Reply

  2. Brett
    Dec 24, 2009 @ 06:33:59

    Any luck with the live sample? I have been unable to get your plugin to work based on the code above. I’m getting Javascript Errors:

    Firebug’s log limit has been reached. %S entries not shown. Preferences
    missing } after property list
    [Break on this error] label:Link Button,\nplugin.js?t=95MI (line 15)
    u is null
    [Break on this error] l.basePath=j;l.fileName=k;l.registered={…var A=0;A<v.length;A++)if(v[A])v[A]();\r\n

    Reply

    • ajithmanmu
      Dec 25, 2009 @ 16:44:00

      Hi Brett,
      I am unable to post the live sample now.. :-(..but i will do soon. However i have sent the code sample to your email. pls check that out.. Also can you share more info regarding this error( if possible the code inside plugin.js). pls get back for any help.

      Reply

  3. miramardesign
    Dec 30, 2009 @ 22:13:17

    i found the issue in the plugin.js:
    Single quotes when pasted are changed from “‘” to ” ’”

    Replace the single quotes manually and it should work.

    Reply

  4. Hi !!
    Jan 15, 2010 @ 11:41:09

    where do i have to put FormatEditorText() function ?

    Reply

    • ajithmanmu
      Jan 15, 2010 @ 17:10:30

      Hi,
      You can place the FormatEditorText() function in your main coldfusion page ( The page in which you include all the JS libraries).

      Reply

  5. vapour
    Mar 19, 2010 @ 00:27:24

    Good! Thank you.

    Reply

  6. Eric Lewis
    Mar 19, 2010 @ 22:53:04

    Sincere thanks Ajithmanmu. I’ve been looking for a simple instructional on how to create a plug-in for CKEditor, and after three brainbusters yours was a pleasure. THANKS!

    Reply

  7. Jana
    Mar 22, 2010 @ 07:48:13

    Hi!, thank you for your effort but i have a question, i want to use Ckeditor, but i dont want to add new buttons, i actually want to modify the existing logos/icons images, i only want to
    add Morse codes ( for example: ..- or .-..- ,etc) under every logo ( to be part of the logo image). i want to modify it like this to be used by mobility impairment people, so they can click Morse code using the keyboard inorder to use the editor instead of using the mouse for moving, choosing and clicking. I’m sorry English is not my native language, i can send you a prototype i made to see what i’m talking about!

    Reply

    • ajithmanmu
      Mar 22, 2010 @ 15:07:44

      hi Jana, i am not too sure about your requirement , but if you cud send me your prototype i could definitely help u….

      Reply

  8. Lam Nguyen
    May 14, 2010 @ 08:02:48

    Hi, I have a question? I created a external plugin and load to CKEditor toolbar is ok. And when click icon’s the plugin, it will show dialog?
    Here is code plugin :

    CKEDITOR.plugins.add(‘helloworld’,
    {
    requires : ['iframedialog'],
    init : function(editor) {
    var pluginName = ‘helloworld’;
    var mypath = “http://127.0.0.1:8080/static/eXoPlugins/helloworld/”;
    editor.ui.addButton(
    ‘helloworld.btn’,
    {
    label : “My Plug-in”,
    command : ‘helloworld.cmd’,
    icon : mypath + ‘images/helloworld.gif’
    }
    );
    var cmd = editor.addCommand(‘helloworld.cmd’, {exec:showDialogPlugin});
    CKEDITOR.dialog.addIframe(
    ‘helloworld.dlg’,
    ‘Hello Title’,
    mypath + ‘helloworld.html’,
    400,
    300,
    function(){
    }
    );
    }
    }
    );

    function showDialogPlugin(e){
    e.openDialog(‘helloworld.dlg’);
    }

    I have a question? How to disable okButton and cancelButton of iframeDialog. I has been tried to do this with method disable() of dialog, but it still not working.

    Reply

  9. shevy
    Jul 18, 2010 @ 15:30:35

    I’m having trouble adding a new plug-in, I’m getting an error similar to Brett’s,
    can you please send me your sample as well, maybe I’ll have more luck,
    Thanks

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: