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 vB.org 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
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
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 vB.org 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:
CKEDITOR.plugins.add( 'YourPluginName',
{
init: function( editor )
{
editor.addCommand( 'SayHello',
{
exec : function( editor )
{
editor.insertHtml( "Hello from my plugin" );
}
});
editor.ui.addButton( 'YourPluginName',
{
label: 'My Button Tooltip',
command: 'SayHello',
icon: this.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
Comment