Tips: Protect method to remove empty i tag with CKEditor4 plugin

Question

We use sometimes i tag on Bootstrap themes such as FlexArmor2 for vector icons (e.g. font awesome, GLYPHICONS).

Example of HTML code:

<i class="fa fa-book"></i>

However, because CKEditor removes empty tag, i tag is lost.

Solution1 (recommended):

You can evade this by adding a lower line to CKEditor4 Other configuration option.

protectedSource:[/<i[^>]*><\/i>/g],

Solution2:

You can deal by adding space.

<i class="fa fa-book">&nbsp;</i>

Reference:

• CKEditor4
• CkEditor4 for admin  <<< This Tips will be particularly effective in this plugin.
• "ckeditor strips i tag" (SO)
• CKEditor.config protectedSource

Comments

We use Solution2:

You can deal by adding space.

<i class="fa fa-book">&nbsp;</i>