关于css：列表图标：TinyMCE删除了Awesome-Tags字体


List Icons: TinyMCE removes Font Awesome-Tags

Font Awesome支持列表图标，它看起来非常漂亮，并且易于处理和设置。例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="fa-ul">

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


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


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


</ul>

看起来像这样：

enter image description here

问题是TinyMCE-Editor，它删除未知/不必要的代码，这里是"空" -Snippet：

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

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

1
2
3
4
  tinymce.init({
    cleanup : false,
    verify_html : false
  });

这可行，但是非常复杂，在TinyMCE-Editor中的无序列表之后几乎无法编辑。如果我删除" Point 1"或覆盖文本，TinyMCE还将删除之前的 -Tag(即使我仍然在

  • 行中)。基本上在"点1"之前有两个空格。但这很难解释我的顾客。

    是否有解决方案或微小的技巧来防止在编辑器中删除代码段？在我的情况下，每个List-Point都带有图标。因此，可以在

  • 之后始终添加 -Tag。这可能吗？

    相关讨论

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

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

    插件：

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

    如果您不想将其用作插件，欢迎使用源代码的相关部分并手动实现。

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

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

    但它将更改为