Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

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:

ckeditor moono default

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 cr if 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.
ckeditor moono dark

Comments

Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon