CKEditor CodeMirror

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

3.x

The 3.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.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

1. Download and install CKEditor CodeMirror module.

2. 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:

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

   2. 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.

   3. 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

1. Go to "Administration » Configuration » Content authoring » Text formats and editors" (admin/config/content/formats) page.
2. Click "Configure" for any text format using CKEditor as the text editor.
3. 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.
4. Scroll down and click "Save configuration".
5. 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

1. Download and install CKEditor and Libraries API modules.
2. Download and install CKEditor CodeMirror module.
3. 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

1. Go to "Administration » Configuration » Content authoring" (admin/config/content/ckeditor) page and edit any CKEditor profile.
2. 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.
3. Go to node create/edit page, choose the text format with CodeMirror plugin. Press the "Source" button.