Drupal 8 - How to add custom Styles CSS In CKEditor

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: