Prevent CKEditor from removing empty <i> tags

January 21, 2015

Using CKEditor, when you try to add an icon to your content using an empty i tag like so

    <i class="icon-myicon"></i>

You will be surprized when you check your handy work, there is no icon. Checking back in CKEditor you find that the i tag has disapeared. CKEditor removes empty html tags by default unless we tell it otherwise. The fix is quite simple. Find the file ckeditor.config.js in the ckeditor module directory. In the file, around line 25 there is a section that starts with a comment "// Protect PHP code tags ()..."

Right behind that section add:

  // ALLOW <i></i>
  config.protectedSource.push(/<i[^>]*><\ i="">/g)</\></i[^>

There is a good discussion on if you like to learn more about this.