0

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 :

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

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?

2

See

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 &$settings) {


  foreach ($settings['editor']['formats'] as $name => $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' => 'Custom Color Text',
        'element' => 'p',
        'attributes' => [
          'class' => "custom-color-text"
        ]
      ],
      [
        'name' => 'Custom Color Link',
        'element' => 'a',
        'attributes' => [
          'class' => "custom-color-link"
        ]
      ],
    ];
  }
}

function MYMODULE_preprocess_node(&$variables) {

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

// Nice to haves:
function MYMODULE_ckeditor_css_alter(&$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.

| improve this answer | |
  • This works for adding the style to the editor. I'm trying to use this in an email so I don't know how to get this bit of css to attach to the email. I am using a custom theme so I guess I could just add it to that template, I'm hesitating there because it seems disjointed but do-able. Is there an easy way to just add the inline? I am not styling more than one or two lines. – Derek C. May 23 at 19:11
  • There’s always a way with Drupal. Sometimes it’s a question of time, and sometimes budget. As you’ll have a class available, I would see if I could just include the CSS rules in the head of the email document? – Prestosaurus May 23 at 21:00
  • Yes I was going to add the class name to the custom theme, just wouldn't be my preferred I guess. – Derek C. May 23 at 23:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.