Allow empty tags

Question

I need help to allow CKEditor empty tags. I know that I need to add something like CKEDITOR.dtd.$removeEmpty['i'] = false in a config file, but I can't find this file in Drupal 8.0.0 installation.

I just want to know where is the right place to add this line to allow CKEditor empty tags.

Answer 1

Rather than modify the Drupal 8 core, you should do this using some Javascript like the sample below. This can be loaded from your admin theme or other module.

(function ($, Drupal) {
  Drupal.behaviors.customCKEditorConfig = {
    attach: function (context, settings) {
      if (typeof CKEDITOR !== "undefined") {
      CKEDITOR.dtd.$removeEmpty['i'] = false;
      CKEDITOR.dtd.$removeEmpty['span'] = false;
console.log(CKEDITOR.dtd);
      }
    }
  }
})(jQuery, Drupal);

For some more details see: Drupal 8 CKeditor behaves LTR in an RTL site

Answer 2

Not sure this works for CKE5 anymore.

I had to write my own plugin with its own upcasting & downcasting due to the drupalEmphasis plugin.

Otherwise when italics are enabled in the toolbar it will convert the <i> to an <em> regardless of allowing "empty" tags.

I posted a module that might help someone else;

https://www.drupal.org/project/ckeditor_svg_icon

and more specifically;

https://git.drupalcode.org/project/ckeditor_svg_icon/-/blob/main/js/ckeditor5_plugins/svgIcon/src/svgicon-editing.js#L58