我使用 Composite C1 CMS，但其中的自定义 TinyMCE 太疯狂了。简单的问题：我们想使用 Font Awesome 图标。源代码编辑没问题。 如果我们添加以下内容：
<i class="fa fa-bus"></i>
这已被删除。好吧，加个空格：
<i class="fa fa-bus"> </i>
i 被转换为 em。
如果我在文件 visualeditor.js 中的配置中更改 valid_elements，没有任何反应，仍然是同样的问题。
这个问题有什么解决办法吗？无论如何，向工具栏添加一个按钮'添加图标'会很好。
【问题讨论】：
默认情况下，TinyMCE 会删除空元素，因此您在标签之间添加&nbsp; 以告诉 TinyMCE 它不是空的。此外，<i> 在旧版本的 HTML 中曾经是斜体，因此它试图将旧的斜体标记转换为首选的 <em> 强调标记。确实，您可以使用任何带有 Font Awesome 的标签来解决此问题，只需将您的 <i> 更改为 <span>：
<span class="fa fa-bus">&nbsp;</span>
【讨论】：
接受的答案使用&nbsp;，但这会在您的图标旁边产生一个间隙，导致它稍微偏移。更好的选择是使用评论：
<i class="fa fa-bus"><!-- icon --></i>
现在 TinyMCE 不会清理“空”元素并且您不会有间隙，但它仍会将您的 <i> 转换为 <em>。为防止这种情况，请将以下内容添加到您的 TinyMCE 初始化中：
tinymce.init({
// ...
extended_valid_elements: 'i[class]'
});
图标字体的困境多年来一直是个问题，所以I finally wrote a plugin 以最小的努力解决它。插件：
如果您不想使用该插件，请随时潜入the source 以了解具体情况。
干杯！
【讨论】：
我知道这是一个老问题，但我想在这里加两分钱。
众所周知，TinyMce 去掉了<i></i>，所以我们必须想办法绕过这个问题。
在这种情况下，我使用的一种快速方法是将 <i></i> 替换为 <span></span>，就像我之前提到的 Howdy_McGee 一样。
所以，总结一下，在你的例子中，而不是使用：
<i class="fa fa-bus"></i>
你可以使用：
<span class="fa fa-bus">&nbsp;</span>.
【讨论】：