列表图标：TinyMCE删除Font Awesome-Tags

Question

Font Awesome 支持List Icons，它看起来非常好，易于处理和设置。例如：

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

这将是这样的：

问题是TinyMCE-Editor，删除了未知/不必要的代码，此处为＆＃34;空＆＃34; <i> - 段：

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

我知道，有选项 cleanup 和 verify_html 禁止清理插入的代码。

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

这很有效，但它很复杂，几乎不可能在TinyMCE-Editor中的无序列表之后进行编辑。如果我删除＆＃34; Point 1＆＃34;或者覆盖文本，TinyMCE也会删除之前的<i> - 标签（即使我仍然在<li> - 行）。基本上在＆＃34; Point 1＆＃34;之前有两个空格。但这很难解释我的客户。

是否有解决方案或微小的黑客入侵，以防止在编辑器中删除代码段？在我的例子中，每个List-Point都有Icon的形式。所以在<i>之后添加<li> - 标记是可以的。这可能吗？

Answer 1

这个字体图标问题困扰了我很长时间。我终于想出了一种防止它发生的方法，但这并不是一个简单的解决方法，因此我将其包装到TinyMCE 4和5的插件中：

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

插件：

• 防止TinyMCE将图标转换为元素
• 防止TinyMCE删除空字体图标
• 使字体图标可选，以便您更轻松地复制/粘贴/删除它们
• 让我们配置用于识别字体图标的CSS选择器

如果您不想将其用作插件，欢迎抓住the source的相关部分并手动实施。

Answer 2

您可以添加空格，以便标记不为空：

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

但会将<i>更改为<em>