CKEditor CodeMirror

CKEditor CodeMirror adds syntax highlighting for "Source View" in CKEditor WYSIWYG editor.

3.0.x The 3.0.x series only supports CKEditor 5.

Settings migrations from 8.x-2.x/CKEditor 4 are provided but the following features are no longer available in the 3.0.x version:


* Theme
* Enable search tools (always enabled)
* Enable code folding (always enabled)
* Enable code formatting.
* Format code on start.
* Format code each time source is opened.
* Format code when a line is uncommented.

Notably, some of these 8.x-2.x features never worked. 😬

Dependencies

* CodeMirror 5 (external)
* CKEditor 5 CodeMirror plugin (external)

These dependencies must be located in the libraries directory of the Drupal installation (i.e., at the same level as core and modules):


* /libraries/codemirror
* /libraries/ckeditor5-source-editing-codemirror

A composer.libraries.json file is provided for use with the Composer Merge Plugin.

8.x-1.x/8.x-2.x The 8.x series versions only support CKEditor 4.

IMPORTANT NOTE: See the 8.x-2.0 release notes before upgrading from 8.x-1.x to 8.x-2.x, as there have been breaking changes.

Dependencies

* CKEditor-CodeMirror-Plugin library (external)

Installation

* Download and install CKEditor CodeMirror module.


* Install the CKEditor-CodeMirror-Plugin library

For Composer-managed Drupal installations, the recommended method is to use the Composer Merge Plugin and this module's composer.libraries.json file. From a Composer project root:


* Execute composer require wikimedia/composer-merge-plugin.


* Add the following to the extra section of the root composer.json file:

"merge-plugin": { "include": [ "{DOCROOT}/modules/contrib/ckeditor_codemirror/composer.libraries.json" ] }, Note: Remember to replace {DOCROOT} with the appropriate root folder for the Drupal installation -- this is likely web or docroot.


* Execute composer install (or, in some cases, composer update --lock).



That's it! Composer should install the CKEditor CodeMirror plugin in the appropriate place (/libraries/ckeditor_codemirror).



Drupal 9/10 configuration
* Go to "Administration » Configuration » Content authoring » Text formats and editors" (admin/config/content/formats) page.
* Click "Configure" for any text format using CKEditor as the text editor.
* Under "CKEditor plugin settings", click "CodeMirror" and check "Enable CodeMirror source view syntax highlighting". Make sure that the current toolbar has the "Source" button. Adjust other settings as desired.
* Scroll down and click "Save configuration".
* Go to node create/edit page, choose the text format with CodeMirror plugin. Press the "Source" button.

7.x-1.x Dependencies

* CKEditor module https://www.drupal.org/project/ckeditor
* Libraries API (2.x) module https://www.drupal.org/project/libraries
* CKEditor-CodeMirror-Plugin library https://github.com/w8tcha/CKEditor-CodeMirror-Plugin

Installation

* Download and install CKEditor and Libraries API modules.
* Download and install CKEditor CodeMirror module.
* Download CKEditor-CodeMirror-Plugin library to the following directory sites/all/libraries/ckeditor.codemirror. Path to plugin.js file should be sites/all/libraries/ckeditor.codemirror/plugin.js. Note: Latest version of module will offer to do this for you automatically. Use drush ckeditor-codemirror-download (or drush ccmd) command to download the library.

Drupal 7 configuration

* Go to "Administration » Configuration » Content authoring" (admin/config/content/ckeditor) page and edit any CKEditor profile.
* Under "Editor appearance" section scroll down to "Plugins" list, enable "CodeMirror (Source) Syntax Highlighting" plugin. Make sure that the current toolbar has the "Source" button. Save the profile.
* Go to node create/edit page, choose the text format with CodeMirror plugin. Press the "Source" button.