Short guide to adding your own CKEditor plugin using wysiwyg hooks.
1. First of all, we need to establish a file structure for our plugin
Inside your custom module folder we create a new folder for the plugin
Thus we have an example file structure as such:
my_module.module
my_module.info
my_plugin - our plugin folder
It is good practice to create a separate folder for each editor,
if your site uses multiple editors (eg. my_module/ckeditor/my_plugin)
2. Now we add the hook_wysiwyg_plugin to our file my_module.module.
This will tell the wysiwyg module that it should make our button available to us
in our wysiwyg profile configuration page.
(admin/config/content/wysiwyg/profile/wysiwyg_profile_name/edit)
Remember to activate the button here, to make it available in the CKEditor toolbar.
function my_module_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'my_plugin' => array(
'path' => drupal_get_path('module', 'my_module') . '/my_plugin',
'buttons' => array(
'my_plugin_button' => t('Do something awesome'),
),
'load' => TRUE,
),
);
break;
}
}
3. Now we want to tell CKEditor what to do with our new button.
Add a file in the my_plugin folder called plugin.js and add the javascript code below.
You may also want to add a 16x16 image for the icon used in the CKEditor toolbar.
The real work is done in the exec function. In this example, we simply insert some text whenever the button is activated.
(function($) {
CKEDITOR.plugins.add( 'my_plugin', {
init: function( editor )
{
editor.addCommand( 'my_command', {
exec : function( editor ) {
//here is where we tell CKEditor what to do.
editor.insertHtml( 'This text is inserted when clicking on our new button from the CKEditor toolbar' );
}
});
editor.ui.addButton( 'my_plugin_button', {
label: 'Do something awesome', //this is the tooltip text for the button
command: 'my_command',
icon: this.path + 'images/my_plugin_button.gif'
});
}
});
})(jQuery);
That's it, you're all set.
Comments
This is not working
I have followed the same steps and its not working not loading my plugin which i have created. even it is not loading the sample code which is given in the post.
Any one else have faced this kind of problem ?
having the same issue. I have
having the same issue. I have created a module in ckeditor and it definitely works there. It just will not load when it is in drupal. Tried it also with the example code and also this does not work.
I have updated the example
I have updated the example code. Hopefully this works better.
CKEditor module
Does this also work for the CKEditor module?
I don't think as the
I don't think as the mentioned hook is to allow wysiwyg module to register a new plugin. I belive hook_ckeditor_plugin() hook is the hook to tell ckeditor module about you plugin.
Arpit Rastogi
Add trailing slash to $path
Regarding the editor breaking when following the given example, adding a trailing slash to the path directory fixed it for me:
J.
TrainingCloud.io - Drupal Training with a Heart.
I have a working example
Hi there, I have a working example here: https://github.com/isramv/ckeditor_linkchange