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

<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.

i came across the same problem , read here for a solution stackoverflow.com/a/18254082/1316372 — HenryW
– HenryW, Commented Aug 15, 2013 at 15:15

oleq · Accepted Answer · 2013-02-12 11:38:16Z

9

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.

edited Feb 12, 2013 at 11:38

answered Feb 12, 2013 at 11:28

oleq

15.9k1 gold badge40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

secondman Over a year ago

Shouldn't this be handled already via config.fillEmptyBlocks which is set to true by default? How does one edit the CKEDITOR.dtd.$removeEmpty object to remove the i element? I can't find it listed as being removed anywhere in js files. I'd like to edit the fillEmptyBlocks function to use  instead of the non-breaking space. The spacing of icons in font-awesome is only correct when the element remains empty or uses 

user1157743 · Accepted Answer · 2014-06-13 07:22:33Z

0

below worked for me.. thanks to Vince Kronlein pointing out config.fillEmptyBlocks

CKEDITOR.editorConfig = function( config ) {
       config.fillEmptyBlocks="&#8203;";  
}
CKEDITOR.dtd.$removeEmpty['span'] = false;
CKEDITOR.dtd.$removeEmpty['i'] = false;

answered Jun 13, 2014 at 7:22

user1157743

1

Comments

keivan kashani · Accepted Answer · 2020-01-11 12:56:32Z

0

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

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

answered Jan 11, 2020 at 12:56

keivan kashani

1,37914 silver badges16 bronze badges

Collectives™ on Stack Overflow

CKEditor and escaping elements

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related