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 ;-).

24 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

  10. Al'
    Jun 20, 2011 @ 11:35:15

    Hey thank you for this article.

    I just test it, but this did not work :

    My plugin.js looks like this:

    (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=’situation’;
    CKEDITOR.plugins.add(b,{
    init:function(editor){
    editor.addCommand(b,a);
    editor.ui.addButton(‘situation’,{
    label:’situation’,
    icon: this.path + ‘logo_ckeditor.gif’,
    command:b
    });
    }
    });
    })();

    That code is in the situation directory under the ckeditor/plugins directory.

    Also, that’s my Config.js modification :

    CKEDITOR.editorConfig = function( config )
    {
    config.toolbar = ‘MyToolbar’;

    config.toolbar_MyToolbar =
    [ [‘Source’,’-‘,
    ‘Preview’,’Templates’,’-‘,
    ‘Bold’,’Italic’,’Underline’,
    ‘Blockquote’, ‘CreateDiv’,’situation’],

    };

    Thank you man.

    Reply

  11. Al'
    Jun 20, 2011 @ 12:23:50

    And where shoud we place :

    function FormatEditorText()
    {
    var myEditor = CKEDITOR.instances.editor1;
    var theSelectedText = document.getElementById(‘txtSelected’).value;
    var theAnchorText = document.getElementById(‘txtAnchor’).value;
    var FormattedText = ‘’+theSelectedText+’’;
    myEditor.insertHtml(FormattedText);
    }

    Reply

  12. ravneet
    Jul 15, 2011 @ 10:57:30

    Hi

    I am new to the development and i have got a project to add some new plugins in ckeditor can any one help me out how we actually do it as i followed the above example but was not able to find any solution .Can any one send me the code at my email id ravneet.singh@igladweb.com.
    With Regards

    Reply

  13. Carl
    Jul 18, 2011 @ 06:01:18

    Interesting post, please send the code.

    Reply

  14. Arim
    Sep 14, 2011 @ 07:16:43

    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

  15. Arvind Bhardwaj
    Dec 09, 2011 @ 06:32:14

    Here is the complete tutorial showing how to add new plugin with custom button and dialog box to ckeditor.
    http://www.webspeaks.in/2011/12/create-custom-plugin-with-button-in.html

    Reply

  16. Sunil
    Jun 07, 2013 @ 13:38:06

    Hi ajithmanmu,

    Please send the sample code as i’m not able to add the plugin as you mentioned in the blog.

    Reply

  17. amol
    Nov 19, 2013 @ 10:45:13

    Any one tried integrating CKEditor plugin with pramukhime Ckeditor plugin.
    I am facing lot of issues, help needed.

    Reply

  18. Narasimham Addepalli
    Feb 26, 2014 @ 14:41:50

    Hi Ajith,

    I created a plugin with code very similar to what you have shown. Basically I did not create variable names in my code and plug them in. Instead I coded it directly.

    CKEDITOR.plugins.add(‘spell’,
    {
    init: function (editor) {
    editor.addCommand(‘spell’, {
    exec: function (editor) {
    rapidSpell.ayt_aytEnabled = false;
    spell(‘cke_contents_Model_NoteText’, ‘dialog’);
    }
    });

    editor.ui.addButton(‘spell’, {
    label: ‘Spell Check’,
    command: ‘spell’,
    icon: this.path + ‘icons/spell.png’
    });
    }
    });

    It works fine in IE 9 but throws a Javascript Error in IE 8. I am using CKEditor 4 and it supports IE 8 as well. So I am wondering where the issue is.

    Message: Object doesn’t support this property or method
    Line: 21
    Char: 5
    Code: 0
    URI: https://btsdebasctk01.wrbts.ads.wrberkley.com/Library/Scripts/ckeditor4/plugins/inlinespell/plugin.js?t=E0LB

    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: