No announcement yet.

Add a new toolbar button to CKEditor (Tutorial)

  • Filter
  • Time
  • Show
Clear All
new posts

  • Add a new toolbar button to CKEditor (Tutorial)

    Hello all,

    First of all I'd like to say that PHP is not my cup of tea. I come from a .NET world. I've been researching about adding your own button (plugin) to a vB's CKEditor. It's VERY EASY to do on a stand alone installation of ckeditor btw but somewhat cumbersome to do it in vB. Since there is no documentation about this (my search on didn't produce any results) I've decided to share my findings. Here is how to do it:

    Disclaimer: Special thanks to ragtek, Scott Molinari and Wane Luke. This tutorial is based on ragtek's articles written in German. Scott was very kind to translate and share those code snippets from vB Germany. Luke provided a little guidance for the hook I had to use. Anyways, here it goes

    • AdminCP -> Plugins & Products - > Plugin Manager
    • Add new Plugin:
      • Product: vBulletin
      • Hook Location: editor_contruct
      • Title: Your Plugin Description
      • Execution Order: leave it as is
      • Plugin Code: $this->config['_extraPlugins'] .= ',YourPluginName';

    • Open vb/ckeditor.php. Around line #256 you will see bunch of IFs (these are just checks to see what type of editor to use. Find appropriate condition i.e: qr, qe etc (or you use ALL condition if you want your button to show up in every editor on your site) to add your button there. For example I wanted to add a button after a SMILEY button, so change this line:
      $toolbar[] = array('Smiley');
      to this
      $toolbar[] = array('Smiley', 'YourPluginName');
    • Create a folder in vb/clientscripts/ckeplugins as YourPluginName that you've previously defined in the AdminCP/Plugin, i.e: vb/clientscript/ckeplugins/YourPluginName
    • Upload an YourPluginImage.png to vb/clientscript/ckeplugins/YourPluginName. This image is for your plugin/toolbar button (I've created a 20x20 png image and it looks very nice and clean)
    • Create a file plugin.js in vb/clientscript/ckeplugins/YourPluginName with the code similar to the one shown below (this is an example only, you will have to modify this javascript to suit your needs)

    PHP Code:
    init: function( editor )
    exec : function( editor )
    editor.insertHtml"Hello from my plugin" );
    label'My Button Tooltip',
    iconthis.path 'YourPluginImage.png'
    } );
    } ); 

    You are DONE!
    I hope this helps you all as I had to struggle a bit to get things in order.

    Scott and I were talking about this and it would be very cool if some PHP developer can turn this into a vB's "CKEditor Button" plugin
    Last edited by ShyGuy82; Tue 7 Feb '12, 3:16pm.
    Speed up your member list page by at least 5x (4.x.x)

  • #2
    Thanks for this!
    Maybe we need a hook near $toolbar[] = array('Smiley');in vb/ckeditor.php

    I wrote a howto put BBcodes into a product file
    (so you don't have to load them via the GUI and can incorporate them into a
    bigger product or have database access when processing the BBcode),
    which combined with this tutorial gives a lot of options.
    environment: Centos 6.9, Apache v2.4.25, PHP 5.6.30/xCache, MariaDB 10.22 -- vB5 Connect Licensed

    AusPhotography - Australia's Premier Photographic Forum vB4.2.3
    Rick (site owner) and Kym (site tech) sharing this account


    • #3
      Good deal, if someone can combine these ideas and create a plugin called CKEDITOR BUTTONS, that would be ultimately a great plugin, I'm sure many people will benefit from this.
      Speed up your member list page by at least 5x (4.x.x)


      Related Topics