CKEditor and escaping elements

Question

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

&l         


        

Answer 1

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.

Answer 2

You can use unicode of ‌ in situation of html code showing in CKEditor for making Zero-width non-joiner (mini-space) in languages like persian.

می‌خواهم می‌توانم

Answer 3

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;