Using the CodeMirror Syntax Highlighting plugin with CKeditor and the WYSIWYG module

Question

I've installed the latest version of CKeditor and everything works great. However, I wanted to install the CodeMirror Syntax Highlighting Plugin to use it for my editor.

1. I downloaded the plugin: http://ckeditor.com/addon/codemirror
2. I extracted the plugin into the plugins directory
3. I added config.extraPlugins = '[ codemirror ]'; to the config.js file

When I go to the WYSIWYG Profiles section to enable the plugin, it is not there.

Has anyone successfully done this? I've also cleared the cache multiple times.

Answer 1

You can install CodeMirror as a library, and then make a "FULL HTML" profile in WYSIWYG. In practice, you'd get a drop-down entry for it on your edit page (e.g. the ability to switch editors to CodeMirror instead of CKeditor), and a config page within the WYSIWYG module. It's not fully flushed out, but is workable enough to use in production, and TwoD has given really strong input for how we could finish it up properly.

Alternately, you could try to get it working as a CKeditor plugin. You'd get a button toggle in CKeditor, but no configurability within the WYSIWYG module (which defeats the purpose of using WYSIWYG in the first place, IMHO). Haven't tried that one, but my read is that it works.

If you're not too concerned about configurability, you might be able to just drom WYSIWYG completely, and use the original CKeditor module instead. According to one of the folks in those linked threads, CodeMirror works with it out of the box.

There's also a TinyMCE integration module, wysiwyg_codemagic, that supposedly works.

Answer 2

The line in the configuration file should be config.extraPlugins = 'codemirror';.

Answer 3

I have this working as follows

• I created a custom module
• In the module.php I added a function MYMODULE_wysiwyg_editor_settings_alter - look it up
• In the alter function, I added $settings['extraPlugins'] .= ($settings['extraPlugins'])? ",codemirror":"codemirror";

In the wysiwyg profile editor, it doesn't show up. But when I use the default 'source' button, it uses codemirror now. Which is WAY nicer :-)