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 I can allow this tag? I have tried CONFIG.removeFormatTags = '', but it dies not help.
It is removed because it is empty. Put some non-breaking space or zero-width space ​ 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.
below worked for me.. thanks to Vince Kronlein pointing out config.fillEmptyBlocks
CKEDITOR.editorConfig = function( config ) {
config.fillEmptyBlocks="​";
}
CKEDITOR.dtd.$removeEmpty['span'] = false;
CKEDITOR.dtd.$removeEmpty['i'] = false;
来源：https://stackoverflow.com/questions/14829961/ckeditor-and-escaping-elements