CK Editor strip empty tags

Question

The rich text editor removes tags with an empty value. For instance, if I want to display such FontAwesome icon

<i class="fas fa-check"></i>

then when I save the content then open it again, this <i> tag has been removed

Cause

The CKEditor remove empty tags

Solution

To prevent this behavior, you will need to configure the CK editor. You can do it by creating your own configuration throw a module using the /tools/ckeditorConfig.jsp tool or by adding your configuration to your template set as in the example here https://github.com/Jahia/dx-base-demo-templates/blob/master/src/main/resources/javascript/ckeditor_config.js

Here is the line you will need to add to your CK config file to allow empty <i> tags:

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;