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'scomposer.libraries.json
file. From a Composer project root:-
Execute
composer require wikimedia/composer-merge-plugin
. -
Add the following to the
extra
section of the rootcomposer.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 likelyweb
ordocroot
. -
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 toplugin.js
file should besites/all/libraries/ckeditor.codemirror/plugin.js
. Note: Latest version of module will offer to do this for you automatically.
Usedrush ckeditor-codemirror-download
(ordrush 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.
Project information
- Module categories: Administration Tools, Content Editing Experience, Integrations
- 5,848 sites report using this module
- Created by Plazik on , updated
- Drupal 10 is here!
Version 3.0.x supports Drupal 10!
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Minor bug fixes
Development version: 3.0.x-dev updated 14 Feb 2023 at 20:38 UTC
Asset Packagist library location and css/scss lang mode support
Pre-release version: 8.x-2.5-beta1 released 23 Feb 2023 at 01:55 UTC
Drupal 10 support release!
Development version: 8.x-2.x-dev updated 25 Feb 2023 at 03:05 UTC
Version detection fix
Development version: 7.x-1.x-dev updated 18 Sep 2018 at 15:23 UTC