You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

  1. softmaker
  2. JCE Editor
  3. Wednesday, 09 January 2019
Problem: JCE Pro 2.6.33 loses &nbsp inside <i> and <em> when class name "fa-windows" is used.

1. Enter this code in the JCE Pro Code view:

<h3>Test <em class="fab fa-windows"> </em>Test</h3>
<h3>Test <i class="fab fa-windows"> </i>Test</h3>


2. Toggle to Editor view and back to Code view.

Result: the two nbsp are gone.

This happens only with the class names "fa-windows", "fa-apple" and "fa-linux". If you type a slightly different class name, it doesn't happen. These class names come from a CSS that includes FontAwesome.

Can I configure this problem away, or is this a bug?


Martin Kotulla
SoftMaker Software GmbH
Accepted Answer Pending Moderation
Is there any particular reason why you are adding the non-breaking spaces?
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 1
Accepted Answer Pending Moderation
Ryan, we do this to get a gap between the FontAwesome icon and the following text. Yes, it could be done differently, but it has historically been done on our sites this way, and changing it would mean that I have to review several web sites. I'd rather get JCE Pro working with the HTML we have now.
  1. more than a month ago
  2. JCE Editor
  3. # 2
Accepted Answer Pending Moderation
This is working fine in my tests

https://cdn.joomlacontenteditor.net/tmp/97854-jce-drops-inside-and-but-only-with-specific-class-names.gif
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 3
Accepted Answer Pending Moderation
You can also permanently add a space using css in your template, so you don't have to add the space everytime you add an icon, eg:


.fab, .fas {
margin-left: 1rem;
}
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 4
Accepted Answer Pending Moderation
Prevent this style from being applied to existing icons that contain a space:


.fab:empty, .fas:empty {
margin-left: 1rem;
}
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 5
Accepted Answer Pending Moderation
Ryan, thank you for your help. I just noticed that the forum software here didn't render my original code correctly. It replaced the nbsp with its literal character value, and that's why you didn't have the same starting point to test with. Here is the code again:

<h3>Test <em class="fab fa-windows">&nbsp;</em>Test</h3>
<h3>Test <i class="fab fa-windows">&nbsp;</i>Test</h3>

Thank you for thinking about the circumvention procedure, but ideally I'd like to see it work right without the CSS hacks.

Martin Kotulla
SoftMaker Software GmbH
  1. more than a month ago
  2. JCE Editor
  3. # 6
Accepted Answer Pending Moderation
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 7
Accepted Answer Pending Moderation
Ryan, this seems work well. Great support, thank you! :D
  1. more than a month ago
  2. JCE Editor
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!