How to create a new toolbar plugin in CKEditor

Hey there, here is something which I learned the hard way while I was trying out my hands on customizing CKEdior for a website, in which I needed to add a new button which enabled the admin to add a particular kind of text or HTML tag in the textarea.

So therefore I thought I would share my experience through a simple step by step process of how I managed to achieve the customized feature of adding a new plugin (new button) in the CKEditor toolbar.

Well I just made a button which when clicked will add an image (in this case Truelogic.org Logo) in the textarea content.
Step 1: The basic directory structure of the CKEditor 3.3

( DO KEEP IN MIND THE VERSION OF THE CKEditor BEING USED HERE, DIFFERENT VERSIONS MAY HAVE DIFFERENT FOLDER/DIRECTORY STRUCTURE )

  ckeditor/
        config.js
        plugins/
             insert_image/
                    insert_image_button.png
                    plugin.js

Step 2: Now, as you may have an idea after seeing the folder structure that you have to create a new folder called “insert_image”, inside the plugins folder.

( IMPORTANT: Folder name is very important because the config.js recognizes the function of the plugin based on the folder name given )

Now the code which you have to paste after creating the “plugin.js” inside the “insert_image” folder is given below , this plugin code allows you to insert a predefined image inside the textarea (in this case Truelogic.org Logo)

(function(){
     //The Code is written here, which will be executed when the button is clicked
     var a= {
     exec:function(editor){
             CKEDITOR.instances.txtDescrip.insertHtml("<img src='http://truelogic.org/simple/images/true.png' border=0 />");  
     //CKEDITOR.instances.ID OF THE TEXTAREA.insertHtml("IMAGE URL");
     //above line inserts an IMG tag with the predefined url of the image which points to the truelogic logo
              }
},

//The actual button is defined/created here and the associated code is linked with it
b='insert_image';
CKEDITOR.plugins.add(b,{
    init:function(editor){
    editor.addCommand(b,a); // associating the executable code with the button
    editor.ui.addButton('insert_image',{
                                     label:'Insert image',
                                     icon: this.path + 'insert_image_button.png',
                          //defining the path of the icon image which will be displayed on the toolbar for this button
                          //easiest would be to have the icon image in the same folder as the plugin.js

                                     command:b
                             });
   }
});
})();

Step 3:

Here is the “insert_image_button.png” image to make things easier for you guys

This image has to be put inside the “plugins/insert_image/” folder, next to the plugin.js

Step 4:
Here is the code which is going in the config.js:

CKEDITOR.editorConfig = function( config )
{
     CKEDITOR.config.toolbar_Basic = [
                  ['Source','-','Templates'],
                  ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                  ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                  ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
                  '/',
                  ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                  ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
                  ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                  ['Link','Unlink','Anchor'],
                  ['Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                  '/',
                  ['Styles','Format','Font','FontSize'],
                  ['TextColor','BGColor'],
                  ['Maximize', 'ShowBlocks','-','About'],
                  ['insert_image']                                //Button added to the toolbar
                ]
 config.toolbar = 'Basic';
 config.extraPlugins = "insert_image”;   //registering the plugin
};

Tips:

If you don’t want to alter the default setup of the CKEditor toolbar or if you want to show or hide specific plugins on particular pages or just one page, you can do it by writing a few lines of code in the page where you want to make this happen.

For you to understand more clearly, let me give you an example, say I only want around 10 buttons to be displayed in the toolbar for a specific page called “test-editor.html”

<script type="text/javascript">

var editor = CKEDITOR.replace( 'txtDescrip',    //var editor = CKEDITOR.replace( 'ID OF THE TEXTAREA', 
{
                toolbar : [
                         ['Source','-','Templates'],
                         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
                         '/',
                         ['insert_image']
                            ]
 });
</script>

Using the above code and pasting it in the page where you want to change the look of the toolbar (hide or display a few of the buttons) will allow the page to only show those buttons or plugins which are mentioned in the code

Just to make it even more easier , here is the full code of the “test-editor.html”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 strict//EN">
<html>
<head>
<title>Truelogic.org::TestEditor::CKEditor example </title>

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
 // do keep in mind the include path of the CKEditor folder on the web server or the local server

</head>

<body>

 <form name="" action="" method="">
 <textarea id="txtDescrip" cols="20" rows="5"> </textarea>

<script type="text/javascript">

 var editor = CKEDITOR.replace( 'txtDescrip',   //var editor = CKEDITOR.replace( 'ID OF THE TEXTAREA', 
 {
 toolbar : [
 ['Source','-','Templates'],
 ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton','HiddenField'],
 '/',
 ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 ['Link','Unlink','Anchor'],
 ['Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
 '/',
 ['Styles','Format','Font','FontSize'],
 ['TextColor','BGColor'],
 ['Maximize', 'ShowBlocks','-','About'],['insert_image'] ]
 });
</script>

</form>
</body>
</html>

Small Hints:

‘/’,

– this allows you to add a line break in the middle of the toolbar so that whatever plugin is written after this is displayed in the next line of the toolbar

‘-‘

– this allows you to add a small gap between the buttons.
Like for example: the gap between ‘strike-through’ button and the ‘SubScript’ button

Preview of the CKEditor (default) Before adding the new plugin

CKEditor - default toolbar

Preview of the CKEditor (customized) After adding the new plugin

CKEditor - customized toolbar with new plugin

Preview of the textarea when the new plugin button has been clicked

CKEditor - when insert_image button has been clicked

19 Comments

  1. Just what I was looking for!

    Next question: DO you know how to alter the skin altogether? I always used FCKeditor but that is no longer supported and IE9 messes it up. You had a great FamFamFam skin which I want to add to CKeditor. Can it be done?

    • Well since you asked that question about how to change the looks or the skin of CKEditor ,I managed to write a new blog just to explain how to do that.

      Here is the link to the blog where i have mentioned 2 ways of changing the skin and other few attributes of CKEditor, Hope it helps 🙂
      http://truelogic.org/wordpress/?p=402
      or you could just go to the next blog which is the same 🙂

      Do let me know if anything is hard to understand.

  2. Hi!

    Thanks it was very helpful!

    If I want to just open a new page in a new browser window when clicking on the added button, what would be the code for plugin.js ?

    Thanks!

  3. Nevermind thanks I figured it out:

    Just replaced your line above:

    CKEDITOR.instances.txtDescrip.insertHtml(“”);

    With:

    window.open(‘http://www.google.com’);

    • Hehe… Well thanx for letting me know … sorry i couldn’t reply sooner because of the holiday season i was off the internet for the last couple of days.
      Hope i can be of service to you in the future. 🙂

    • Are you using the exact same code which I have given here … or did you change something according to your functionality ???

      It would be a little easier for me to find out the problem if you could post the lines of code here 🙂 ?

  4. sorry, I wrote everything, than the Captcha got wrong and all my text was gone.

    so in short:

    your example is not universal enough
    you assume the text-area “txtDescrip” and use that for referring the function to insert the html

    as my instance is defined as “post-content” (GetSimple CMS), this cannot work

    please help out with a more universal integration

    by the way, there is a missing apostrophe in the second toolbar-example above

    Cheers, Connie

    • and when I change to the name of my instance, the script goes into endless…

      I changed the name and path of the image which should be included to load it from my server, but that did not stop the script as well
      so in the moment I am unsuccessful

        • no, i mean that:

          the textarea has the name “content-post”
          the editor by this does “var editor = CKEDITOR.replace( ‘content-post’, …)

          so I had to use in plugin.js:

          … CKEDITOR.instances.content-post.insertHtml(“<img …

          and I changed the URL of the image which was to insert into HTML to an URL "at my server" as cross-domain-include is not always allowed, now the code is:

          (function(){
          var a= {
          exec:function(editor){
          CKEDITOR.instances.post-content.insertHtml("”);
          }
          },

          b=’insert_image’;
          CKEDITOR.plugins.add(b,{
          init:function(editor){
          editor.addCommand(b,a); // associating the executable code with the button
          editor.ui.addButton(‘insert_image’,{
          label:’Insert image’,
          icon: this.path + ‘insert_image_button.png’,
          //defining the path of the icon image which will be displayed on the toolbar for this button
          command:b
          });
          }
          });
          })();

          Cheers, Connie

          • You should try and change the name of the plugin from “content-post” to “content_post” or “contentPost” because i don’t think CKEditor takes or allows hyphen in the ID name of the instance / plugin.

    • hmmmm…well that can create a problem because i tried using the same name “content-post” and its said that it does not recognise it properly so i tried changing it to other options which i have mentioned before and it worked fine 🙂

      And even after that i searched for other options to make it work , so i found that CKEditor does not support hyphens(-) in the ID names 🙁

  5. Hi,

    I am Usha Iyer, an Acquisition Editor with Packt Publishing. As an Acquisition Editor, it is my role to evaluate, develop and ultimately bring book ideas to publication. I am also responsible for finding the right author for any book; bringing them onboard, then working with them as the book is written.

    I have begun to develop a microcontent ( microcontent title meaning just 60 pages long ) title on ‘CKEditor’, and am now looking for an author to write this book.

    Please contact me if you are interested in writing this book and I would love to discuss the opportunity with you further.

    Even if you do not want to involve yourself in the project, can you please suggest someone who may suit this project?

    Thanks,
    Usha
    Email: ushai@packtpub.com

1 Trackback / Pingback

  1. Buy PHP Script

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.