配置TinyMCE以使用Composite C1中的Font Awesome图标

Question

我使用的是Composite C1 CMS,但其中的自定义TinyMCE非常疯狂.简单问题:我们想使用Font Awesome图标.源代码编辑没问题.如果我们添加以下内容:

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

这被删除了.好的,添加一个空格:

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

我被转换为em.

如果我改变valid_elements在文件visualeditor.js的配置,没有任何反应,仍然是同样的问题.

这个问题有什么解决方案吗？无论如何,在工具栏的" 添加图标 "中添加一个按钮会很不错.

Answer 1

默认情况下,TinyMCE将删除空元素,因此您 在标记之间添加一个告诉TinyMCE它不是空的.<i>在旧版本的HTML中也习惯使用Italic,因此它试图将旧的斜体标记转换为首选的<em>Emphasis标记.实际上,你可以使用Font Awesome的任何标签来解决这个问题,只需将你<i>改为<span>:

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

Answer 2

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

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

现在 TinyMCE 不会清理“空”元素，并且您不会有间隙，但它仍然会将您的文件转换<i>为<em>. 为了防止这种情况，请将以下内容添加到您的 TinyMCE init 中：

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

TinyMCE 图标字体插件

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

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

如果您不想使用该插件，请随时深入源代码以了解幕后到底发生了什么。

干杯!