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

 

Comments

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

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