配置TinyMCE以在复合C1中使用字体真棒图标

Question

我使用Composite C1 CMS，但其中的自定义TinyMCE太疯狂了。简单的问题：我们想使用字体真棒图标。可以编辑源代码。如果我们添加以下内容：

<i class="fa fa-bus"></i>

此项已删除。好的，然后添加一个空格：

<i class="fa fa-bus">&#160;</i>

i转换为em。

如果我在visualeditor.js文件的config中更改valid_elements，则不会发生任何事情，仍然是相同的问题。

这个问题有什么解决办法吗？无论如何，在工具栏上添加一个按钮"添加图标"会很好。

Answer 1

TinyMCE默认情况下会删除空元素，因此您可以在标记之间添加一个 来告诉TinyMCE它不是空的。此外，<i>在旧版本的HTML中曾经是斜体，因此它试图将旧的斜体标记转换为首选的<em>强调标记。实际上，你可以使用任何带有Font Awesome的标签，所以要解决这个问题，只需将你的<i>更改为<span>:

<span class="fa fa-bus">&nbsp;</span>

Answer 2

接受的答案使用 ，但这会在图标旁边创建一个间隙，使其稍微偏移。一个更好的选择是使用注释：

<i class="fa fa-bus"><!-- icon --></i>

现在TinyMCE不会清除"空"元素，也不会有间隙，但它仍然会将<i>转换为<em>。为了防止这种情况，请将以下内容添加到TinyMCE初始化中：

tinymce.init({
  // ...
  extended_valid_elements: 'i[class]'
});

TinyMCE图标字体插件

图标字体的困境多年来一直是个问题，所以我终于写了一个插件来解决它。插件：

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

如果你不想使用这个插件，可以深入到源代码中，看看到底发生了什么。

干杯！

Answer 3

我知道这是个老问题，但我想在这里加两分钱。

众所周知，TinyMce去掉了<i></i>，所以我们必须找到绕过这个问题的方法。在这种情况下，我使用的一种快速方法是用<span></span>替换<i></i>，正如Howdy_McGee在我之前提到的那样

因此，总结一下，在您的示例中，而不是使用：

<i class="fa fa-bus"></i>

你可以使用：

<span class="fa fa-bus">&nbsp;</span>。