CKEditor strips all inline CSS and some tokens I'm trying to add a color and font size to some text using the CKEditor. As soon as I save it these are stripped out.
I've also noticed some tokens are stripped down when certain settings are enabled.

I went to add a bit of text in a different font and color but when I saved it and viewed the text the spans were stripped of their "style" tag.
I went to config/content/formats/manage and enabled Limit allowed HTML and added span to the list like so :

&lt;a hreflang href&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote cite&gt; &lt;code&gt; &lt;ul type&gt; &lt;ol type start&gt; &lt;li&gt; 
&lt;dl&gt; &lt;dt&gt; &lt;dd&gt; &lt;h2 id&gt; &lt;h3 id&gt; &lt;h4 id&gt; &lt;h5 id&gt; &lt;h6 id&gt; &lt;img src alt data-entity-type data-entity-uuid&gt; 
&lt;u&gt; &lt;s&gt; &lt;p&gt; &lt;h1&gt; &lt;pre&gt; &lt;table&gt; &lt;caption&gt; &lt;tbody&gt; &lt;thead&gt; &lt;tfoot&gt; &lt;th&gt; &lt;td&gt; &lt;tr&gt; &lt;span style&gt;


After saving this all the attributes inside of span are still stripped. I also noticed that many of the tokens I was using (such as site:url) are broken and only half of it remains.

I went back and disabled the Limit allowed HTML option and then when I saved the text the styles and token would save properly.
When viewing the text in an email, the tokens had worked just fine but the span had it's css striped.

I've tried looking for an answer but most are saying I need to enable and add the span to the limit html option but this definitely does not work for me.

There is also Correct faulty HTML enabled, would that be a problem for this?
How can I enable in line styling with the CKEditor?
See 


https://drupal.stackexchange.com/a/282373/79805
https://stackoverflow.com/a/60836391/9302793
https://drupal.stackexchange.com/a/215158/79805


for some further reference :)



You could try using custom CKEditor styles. For using custom styles you'll need a custom module.


MYMODULE/


/MYMODULE.module
/MYMODULE.libraries.yml
/css/style.css



MYMODULE/MYMODULE.module:

function MYMODULE_editor_js_settings_alter(array &amp;$settings) {


  foreach ($settings['editor']['formats'] as $name =&gt; $value) {

    // You can check for specific editors.
    // if ($settings['editor']['formats'] == 'basic_html') {
    //
    // }


    // Otherwise, add our custom styles to all editors.
    $settings['editor']['formats'][$name]['editorSettings']['stylesSet'] = [

      [
        'name' =&gt; 'Custom Color Text',
        'element' =&gt; 'p',
        'attributes' =&gt; [
          'class' =&gt; "custom-color-text"
        ]
      ],
      [
        'name' =&gt; 'Custom Color Link',
        'element' =&gt; 'a',
        'attributes' =&gt; [
          'class' =&gt; "custom-color-link"
        ]
      ],
    ];
  }
}

function MYMODULE_preprocess_node(&amp;$variables) {

  // Attach our styles library.
  $variables['#attached']['library'][] = 'MYMODULE/styles';
}

// Nice to haves:
function MYMODULE_ckeditor_css_alter(&amp;$css, $editor) {

  // Add our ckeditor style sheet to ckeditor.

  // This adds our theme styles to the editor field.
  $css[] = drupal_get_path('theme', 'MYTHEME') . '/css/style.css';

  // This adds our styles from the module directory.
  $css[] = drupal_get_path('module', 'MYMODULE') . '/css/style.css';
}


MYMODULE/css/style.css:

.custom-color-text {
  color: #f00;
}

.custom-color-link {
  color: #00f;
}


MYMODULE/MYMODULE.libraries.yml:

styles:
  version: 1.x
  css:
    theme:
      css/style.css: {}


These will now be available in the "style" dropdown in the CKEditor field.