Installing a CKEditor plugin inside Drupal or Joomla

This post is meant to be a compilation of notes about how to install a "CKEditor plugin", in a CKEditor installed in Joomla or Drupal. That means: you have CKEditor already installed inside your Drupal or Joomla and now you want to add a new third party plugin, and trying to follow the normal guidelines don't work because the integration with those CMSs means that the usual config.js isn't used.
Let's pick just for example this one: HTML5 Video Plugin, these are part of the install instructions that includes:

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='video';

3. Add it to your toolbar

In your toolbar configuration, add a new 'Video' item in the place where you want the button to show up.
So, name of the plugin: "video", toolbar button: "Video"


Edit June 2016:
Let's try to provide some extra info for the SimpleUploads plugin:
The main difficulty for this plugin with regards to other plugins is that it requires a server side script to save files. By default you won't get that with Drupal in the way that it's required, you can use for example IMCE to upload, manage and browse your files, but it lacks a method to save files posted directly from the editor.

You can look at this guide for file uploads in CKEditor as it's the basis for the next instructions:
If you haven't configured the file uploads then the Image dialog won't have the Upload tab and it will be like this image:

Now open your ckeditor.config.js and add a URL for the uploads:
config.filebrowserUploadUrl = '/simpleupload';
Save the changes and load a page with the editor and now it should have the upload tab (but obviously it won't work correctly)
Now it's the time to add our file uploader for Drupal, you can use this simpleuploads module for Drupal and take a look at its install instructions (don't focus on the comments about how to install CKEditor because you should already have it running, or adding the simpleuploads plugin because it's better to do it once the uploads are working)

Follow the instructions, if you have problems don't forget to review the doc about how to configure the file uploads for CKEditor in a generic way.

When you can upload images using the Upload tab in CKEditor you're ready to use the SimpleUploads plugin, it's the proper time to buy it because you know that you have the server ready.

Now extract the SimpleUploads files in the plugins folder for your CKEditor, this depends on how you have installed and configured CKEditor, it can be /sites/all/libraries/ckeditor-plugins or /sites/all/modules/ckeditor/plugins it depends on how you have installed CKEditor, but you should be able to find out in your admin pane. Check this guide about how to install plugins for CKEditor in Drupal, you can read also this guide for Drupal 7  if you're still having troubles to find info

At this point everything should be ready, just save the changes and test. If there are problems look at the browser console for any kind of error


In the ckeditor folder there's a config.ini and config_src.ini , edit them ( I guess that maybe the changes are required on only one of them) and add a new block, like this:
pluginName = Video
image = video/images/icon.png
title = Html5 Video
Hopefully this shold be enough and now you should be able to handle the plugin from the Drupal administration.

As you can see these steps are quite rough and I might be wrong about some of them but I don't use those CMSs and I'm writing this down only to have something to refer to when someone asks how to install a plugin there.
If you have any suggestions (I'm quite sure that this should be explained quite better), then please add a comment, send me a mail, whatever and I'll be glad to improve the post.

No comments: