将 Fontawesome 添加到 ckeditor答案

【问题标题】：Adding Fontawesome to ckeditor将 Fontawesome 添加到 ckeditor
【发布时间】：2013-07-11 09:25:59
【问题描述】：

我在我的网站中使用Fontawesome 并拥有自己的 CMS 来编辑网站页面。我想为用户开发一个对话框，他可以在其中选择一个很棒的图标，但现在可以将它们添加到 ckeditor 的代码视图中。

添加到内容的图标不会显示在 ckeditor 设计视图中。我已更改 ckeditor 配置文件，以便编辑器接受 i 标签 (*)。我将 fontawesome CSS 文件作为 @import 规则添加到 contents.css，但在编辑器区域中仍然看不到 fontawesome 图标。

(*)config.js

config.allowedContent = true;
config.ProtectedTags = 'i' ;
config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag

我可以做些什么来完成这项工作？

【问题讨论】：

标签： ckeditor font-awesome

【解决方案1】：

config.protectedSource.push( /<i class[\s\S]*?\>/g );
config.protectedSource.push( /<\/i>/g );

你所拥有的会干扰 img 标签。和或，毕竟配置：

CKEDITOR.dtd.$removeEmpty['i'] = false;

两者都运作良好。请确保在进行更改时已完全清除缓存。

*编辑一个人在搞砸其他事情的同时工作。一个不可行的解决方案。

我停止使用这个笨重的编辑器。创建了我自己的。但是，要解决该解决方案，请使用 EM 或 SPAN 而不是 I 标记。

【讨论】：

使用 CKEDITOR.dtd.$removeEmpty['i'] = false;适用于初始加载，但我发现在 Source 和 WYSIWYG 之间进行编辑或切换会删除 标记。受保护的源代码有效，但有一个限制是您实际上看不到图标。

【解决方案2】：

当您向 protectedSource 设置添加内容时，您将其隐藏在编辑器中，该内容被转换为 HTML 注释以保护它并避免它可以被用户修改，但作为注释它显然是隐藏的.

【讨论】：

【解决方案3】：

我使用的是 4.11.4，但此解决方案无法正常工作

此解决方案可在 4.11.4 上正确运行

config.protectedSource.push( /<i class[\s\S]*?\><\/i>/g ); // Font Awesome fix

祝你好运

【讨论】：

【解决方案4】：

代替：

config.protectedSource.push(/<i class[\s\S]*?\><\/i>/g );

使用更强大和最好的方法：

config.protectedSource.push(/<i class="fa[s|r|l|b] [A-Za-z0-9\-]+"><\/i>/g);

因为当用户从另一个来源粘贴内容时，CKEDITOR.dtd 应该删除空的，或者将转换为语义，但只有带有class="fas/far/fal/fab *" 的字体很棒的图标应该保留。

（以字体命名：https://fontawesome.com/how-to-use/on-the-web/setup/getting-started）

【讨论】：

【解决方案5】：

看看这个：ckeditor fontawesome addon。

基本上，您应该下载 zip 格式的 fontawesome 插件，然后解压到“ckeditor/plugins/”，名称为“fontawesome”。然后，打开“ckeditor/config.js”并发出新插件的使用信号：

config.extraPlugins = 'fontawesome';
config.contentsCss = 'path/to/your/font-awesome.css';
config.allowedContent = true;

接下来是编辑您的 HTML 部分：

<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>

最后一步是在工具栏中使用工具栏组名称：“FontAwesome”：

config.toolbar = [
    { name: 'insert', items: [ 'FontAwesome', 'Source' ] }
];

这是demo。

这也适用于glyphicons，与使用 fontawesome 的方式相同。

干杯

【讨论】：

现在有多个 fontawesome 插件。这个，当检查源链接时，会导致非常丑陋的垃圾邮件。我要再吃一个。