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:
