n Drupal 8 - How to add custom Styles CSS In CKEditor | CodimTh

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

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

  - css/ckeditor.css


Method 2

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

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

    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 PHP/Drupal & Laravel

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

Web Posts


Page Facebook