List Icons: TinyMCE removes Font Awesome-Tags

3
votes

Font Awesome supports List Icons, which looks pretty nice and which is easy to handle and to setup. Example:

<ul class="fa-ul">
<li><i class="fa-li fa fa-dot-circle-o"></i> Point 1</li>
<li><i class="fa-li fa fa-dot-circle-o"></i> Point 2</li>
<li><i class="fa-li fa fa-dot-circle-o"></i> Point 3</li>
</ul>

That will look like this:

enter image description here

The Problem is the TinyMCE-Editor, which deletes unknown/unnecessary code and here the "empty" <i>-Snippet:

<i class="fa-li fa fa-dot-circle-o"></i>

I know, there are the options cleanup and verify_html to disallow cleaning up the inserted code.

  tinymce.init({
    cleanup : false,
    verify_html : false
  });

This works, but it's quite complicated, nearly to impossible to edit after that the unordered lists in the TinyMCE-Editor. If I delete "Point 1" or overwrite the text, TinyMCE will also delete the <i>-Tag before (even if I'm still in the <li>-line). Basically there are two spaces before "Point 1". But this is hard to explain my customers.

Is there a solution or a tiny hack for this to prevent deleting the snippet in the editor? In my case every List-Point has the formation with the Icon. So it's okay to ADD ALWAYS the <i>-Tag after <li>. Is this possible?

2
csslisticonstinymcefont-awesome
Possible duplicate of Configure TinyMCE for use of Font Awesome icons in Composite C1 – Stephan Weinhold

2 Answers

2
votes

This font icon problem has plagued me for a long time. I finally came up with a way to prevent it from happening, but it's not exactly a simple fix, so I wrapped it up into a plugin for TinyMCE 4 and 5:

https://github.com/claviska/tinymce-iconfonts

The plugin:

  • Prevents TinyMCE from converting icons into elements
  • Prevents TinyMCE from removing empty font icons
  • Makes font icons selectable so you can copy/paste/delete them easier
  • Let's you configure the CSS selector used to identify font icons

If you don't want to use it as a plugin, you're welcome to grab the relevant parts of the source and implement it manually.

1
votes

You could add a space so the tag is not empty:

<i class="fa-li fa fa-dot-circle-o">&nbsp;</i>

but it would change <i> to <em>