1

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

添加到内容的图标不会显示在 ckeditor designview 中。我已更改 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

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

4

5 回答 5

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

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

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

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

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

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

于 2014-03-06T21:34:58.753 回答
1

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

于 2013-07-11T11:09:32.963 回答
0

代替：

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 应该删除空的<i>，或者将<i> 转换为语义<em>，但是应该只保留class="fas/far/fal/fab *" 的fontawesome 图标.

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

于 2019-05-13T09:46:22.573 回答
0

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

此解决方案在 4.11.4 上正确工作

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

祝你好运

于 2019-04-18T15:16:57.520 回答
-2

看看这个：ckeditor fontawesome 插件。

基本上，您应该下载 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' ] }
];

这是一个演示。

这也适用于glyphicons，就像使用 fontawesome 一样。

干杯

于 2016-05-31T09:29:38.253 回答