Working with CKEditor plugins in Drupal 7 can be frustrating. Here are some things I learned while trying to get several CKEditor plugins to play nicely together in Drupal.
The short version
If you're looking for the quick and dirty version of what I've learned, I've compiled it into the bullet points below:
- Drupal will not see individual CKeditor plugins if you include them in a downloaded bundle of the CKEditor library, because plugin.js is not included with each when you download a bundle
- By default, when loading CKEditor from the CDN, Drupal will only register the following plugins in its back-end: tableresize, autogrow, stylesheetparser, codesnippet, mathjax. Support for those plugins is hardcoded into the module.
- If you need to install individual plugins outside of the supported list above, download them individually from the CKEditor site and extract them to a directory like sites/all/libraries/ckeditor-plugins. In the CKEditor config, make sure you set your CKEditor plugins path to that path. Drupal will find those plugins because individually-downloaded plugins include "plugin.js", which is the file it's looking for.
- Ultimately, you'll probably want to load CKEditor from the CDN, then add any additional plugins individually, as I've noted in the previous bullet point.
Why Drupal can't find CKEditor modules
I dug through a bit of the logic in the CKEditor Drupal module while scratching my head about why it couldn't find my plugins. I was trying to get the codemirror plugin to work so that the source code would be nicely formatted when I wanted to edit the HTML directly.
It turns out that the logic the Drupal CKEditor module uses to locate plugins is a bit odd. It includes support for a few specific modules, then tries to search through the CKEditor library directory to find plugins, but there are several reasons why it won't actually find them. Locating modules looks something like this (the code is located in ckeditor.lib.inc, at least in version 7.x-1.16 of the module):
- If loading CKEditor from the local host, add support for the tableresize, autogrow, and stylesheetparser plugins
- If loading CKeditor from the CDN, add support for the tableresize, autogrow, stylesheetparser, codesnippet, and mathjax plugins.
- Next, scan through the plugins directory (configured on the back-end) and look for plugin.js files. If plugin.js is found, try to parse it to glean some meta information about hte plugin, and add the plugin as an option in the CKEditor config.
It's not necessary that Drupal see every plugin, though; some of them operate just fine as long as they're included in the bundle. However, this was not the case with codemirror.
Getting codemirror running in Drupal 7 CKEditor
The following worked for me to get codemirror up and running:
- Download the codemirror plugin to sites/all/libraries/ckeditor-plugins
- Also download the widget and lineutils modules to that same directory; they're dependencies of codemirror.
- Download and enable the Drupalhighlightjs module (so that syntax highlighting works on the frontend)
- In your CKEditor configuration (e.g. for "Advanced" or "Full"), under "Editor Appearance", enable the options for "plugin file: codemirror", "plugin file: lineutils", and "plugin file: widget". If you don't see the options, clear Drupal cache and your browser cache and try again.
That worked for me for codemirror. While debugging, though, I found some other issues with the plugin logic. Initially I was trying to load codesnippet in the same way as described above, but Drupal couldn't find the icon file; I suspect it's because the codesnippet plugin.js uses a variable to store the image path in its configuration, and the Drupal module is looking for a specific format when trying to parse the icon file.
I haven't yet tested the Drupal 8 version of CKEditor, but its seems like the Drupal 7 version needs some help on its plugin loader. However, hopefully the information above will prevent someone else from having to go digging the way I did!