Search code examples
javascripttwitter-bootstrapescapingckeditorfont-awesome

CKEditor and escaping elements

I've using CKEditor for updating CMS content on my website. I also using FontAwesome, which includes set of fancy icons, that can be displayed like this

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

The problem is that CKEditor escapes this i tag on client side, and I can't see it in source mode.

How can I allow this tag? I have tried with CONFIG.removeFormatTags = '', but unfortunately it does not do the job.

Solution

  • It is removed because it is empty. Put some non-breaking space &nbsp; or zero-width space &#8203; within it to preserve your tag.

    You can also remove i from CKEDITOR.dtd.$removeEmpty object. This may, however, break other empty <i> tags without class="icon-envelope". To fix this you would need to play with a data processor to filter empty <i>'s without class="icon-envelope". Pretty easy I guess.