Drupal 8's CKEditor uses the Moono skin by default. In this tuto I'll show you how to create custom CKEditor Moono Dark skin.
By default CKEditor skin is like this:
Create ckeditor_moono_dark_skin module
Create ckeditor_moono_dark_skin.info.yml file:
name: CKEditor Moono Dark
type: module
description: Create Custom CKEditor Moono Dark Skin
core: 8.x
package: Codimth
dependencies:
- ckeditor
Create ckeditor_moono_dark_skin.module file:
<?php
/**
* @param array $settings
*/
function ckeditor_moono_dark_skin_editor_js_settings_alter(array &$settings) {
foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
$settings['editor']['formats'][$text_format_id]['editorSettings']['skin'] = 'moono-dark,/libraries/moono-dark/';
}
}
}
Installation
Download the Moono Dark module, put it into the "libraries" folder.
Enable ckeditor_moono_dark_skin module.
Next steps
- Clear your Drupal 8 caches. To do this I use this Drush command:
drush crif you don’t currently use Drush, I highly recommend using it, or the Drupal Console. - Now, go back to your site, and you should be able to see the ckeditor skin is changed as picture below.
- I hope you found this article useful. let me know if you have any questions and I’ll be happy to answer them.
- This code can be found and downloaded from https://github.com/codimth/ckeditor_moono_dark_skin.
