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:

In this tuto, I'll show you how to add custom Styles CSS to CKEditor in Drupal 8.

Method 1

Add ckeditor_stylesheets key to *.info.yml file. The CSS assets listed there will be loaded into the CKEditor iframe like this example:

name: My Theme
type: theme
base theme: bartik
description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'
package: Core
core: 8.x

ckeditor_stylesheets:
  - css/ckeditor.css

 

Method 2

Also you can load  CSS assets by override hook_ckeditor_css_alter() method like this:

<?php
use Drupal\editor\Entity\Editor;
/**
 * @param array $css
 * @param Editor $editor
 */
function mymodule_ckeditor_css_alter(array &$css, Editor $editor) {
  $css[] = drupal_get_path('module', 'mymodule') . '/css/ckeditor.css';
}

Add css/ckeditor.css file

.button{
    color: red!important;
    padding: 20px!important;
    background: black!important;
}

And this is my final output:

ckeditor moono dark styles css

 

Riadh Rahmi

Senior Web Developer (Drupal & Laravel)

I am a senior web developer, I have experience in planning and developing large scale dynamic web applications especially in Drupal, Laravel.

Web Posts

Search

Page Facebook