CODEWITHSUNDEEP
ckeditordrupal-8
eviau
eviau

Reputation: 71

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

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 :

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

Upvotes: 4

Views: 2033

Answers (2)

mortona42
mortona42

Reputation: 131

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.

Upvotes: 2

eviau
eviau

Reputation: 71

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 :

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".

Upvotes: 3

Related Questions