Ckeditor in Drupal 8 : how to remove <span> tags if they don't have class attributes?

Question

I'm using the "Allowed html tags" filter in Ckeditor - Drupal 8.

I want Ckeditor to keep <span> tags that have specific classes or IDs, and to remove if it has no attribute.

For example :

• Keep span: <span class="apple">text sample</span>
• Keep span : <span id="fruit">text sample</span>
• Remove span : <span>text sample</span> -> text sample

Actually, when I configure a text format, I have this code in the allowed tags field :

<p><sup><sub><span id class="apple"><a href !href accesskey id rel target title>

It keeps <span> with IDs or wanted classes, but I cannot get rid of the unwanted <span> with no attribute.

Is there any way to solve this problem with code input?

Thanks in advance,

Emilie

Answer 1

So here is the custom module I wrote to make it work and to get around this major bug in CKEDITOR :

<?php 
use Drupal\editor\Entity\Editor;

function MODULENAME_editor_js_settings_alter(array &$settings) {
foreach ($settings['editor']['formats'] as $name => $value) {
   $settings['editor']['formats']['machine_name_of_your_text_editor_profile'] 
   ['editorSettings']['allowedContent'] =   
   'p sup h1 h2 h3' +
   'span[!id];
   span(!foo);
   span(!bar);
   span(!jane);
   span(!doe);'
   ;}
}

Result : spans are totally deleted if there is no ID, or if you use a class that is not mentionned in this list (foo, bar, jane or doe). You must declare all elements you need to be displayed, because this config will overwrite all previous inputs in the ACF field.

For this solution, I was inspired by :

• The ACF Custom doc : https://ckeditor.com/docs/ckeditor4/latest/examples/acfcustom.html
• A tread about hook_editor_js_settings_alter : https://drupal.stackexchange.com/questions/268311/hook-editor-js-setting...

Note : Limit allowed HTML tags and correct faulty HTML filter (in /admin/config/content/formats) does not act consistently with the Ckeditor API. Only a part of the options are really implemented in this field, and uses of "!" don't work. This is why the solution provided uses "hook_editor_js_settings_alter".

Answer 2

function MODULENAME_editor_js_settings_alter(array &$settings) {                                                                                                                                                                                                                                                                                                                                                                                                                                
  $formats = ['basic_html', 'full_html'];                                                                                                                                                                                                                                                                                                                                                                                                                                                     
  foreach ($formats as $format) {                                                                                                                                                                                                                                                                                                                                                                                                                                                             
   $settings['editor']['formats'][$format]['editorSettings']['allowedContent']['span']['attributes'] = '!class';                                                                                                                                                                                                                                                                                                                                                                              
  }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
}   

allowedContent is an array when loaded by Drupal. Instead of replacing it with a string, you can use the ACF rules to specify whether attributes are required. This allows the config from the UI to still apply.