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



Submitted by Theo Balkwill (not verified) on Thu, 05/14/2020 - 12:09 Permalink

Hi there, any idea on how to refresh the css used in ckeditor preview? Thanks!
Submitted by codimth on Fri, 05/15/2020 - 10:07 Permalink

@Theo Balkwill please explain what you want do, what does it mean "ckeditor preview" ?

In reply to by Theo Balkwill (not verified)

Add new comment

Restricted HTML

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 and Laravel.

Web Posts


Page Facebook