1

There was an earlier post related to this, but its solution was outdated. So I'm creating a new one.

I am using ExpressionEngine 2.9.2 with Wygwam 3.3.2. Our site incorporates icons using FontAwesome 4.2. FontAwesome icons are called by inserting an <i> tag like <i class="fa fa-caret-down"></i>.

Wygwam, via CKEditor, strips out empty <i> tags by default. In the past, we have suppressed this default behavior by adding CKEDITOR.dtd.$removeEmpty['i'] = false; to CKEditor's config.js file.

However, after updating ExpressionEngine to 2.9.2 and Wygwam to 3.3.2, this approach no longer works (Yes, I added CKEDITOR.dtd.$removeEmpty['i'] = false; to the new config.js file). Empty <i> tags added in source mode are saved, but the next time the editor is initialized on that entry, all empty <i> tags are stripped again. Saving the entry again results in saving the "stripped" version, without the icons. The only way to get the icons back is to re-enter them every time an entry is edited. Not exactly a workable solution.

Any thoughts on how we can get back to preventing CKEditor from stripping those <i> tags?

If it matters, I am editing in Chrome 39.0.2171.27.

EDIT: Apparently it does matter. It appears to work correctly in Safari, Firefox and IE. It's broken only in Chrome. It work in IE, but is broken in Chrome? What is the world coming to? Anyway, I still appreciate any insight into this problem. Thanks.

1
  • 1
    This is a late comment, but since this post was bumped up in the queue today... One thing to look at is the Restrict allowed HTML setting on your Wygwam editor configuration. Make sure it's set to No. More info in this answer
    – Alex Kendrick
    Commented Mar 5, 2015 at 19:34

3 Answers 3

1

We also had this issue, solution we used is:

The content editor removes empty icons when it loads. As a result, the icon needs to have some type of content inside it for the editor to leave it be. We can do this by adding a non-breaking space to the icon: <i class="fa fa-search fa-lg">&nbsp;</i>

0

This is most likely a dead issue by now, however, the solution may be applicable to another CKEditor installation you may have. Adding a non-breaking space can cause spacing problems -- the tag must be empty. the solution is to write the JS in your config file in a slightly different way:

CKEDITOR.dtd.$removeEmpty.i = 0;
0
CKEDITOR.dtd.$removeEmpty.i = 0;

Work to Chrome but not Firefox :/

The solution for me, is insert comment (no generate space) into i tag :

<i class="fa-solid fa-adjust" data-fa42="true" style="display:inline-block;"><!-- --></i>
New contributor
sty255 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
  • CKEDITOR.version = "4.22.1" FIREFOX.version = "125"
    – sty255
    Commented 2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.