向ckeditor添加字体编辑器

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

添加到内容中的图标不会显示在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

config.allowedContent=true；
config.ProtectedTags='i'；
config.protectedSource.push（//g）//允许开始标记
config.protectedSource.push（//g）//允许结束标记

---

我能做些什么来实现这一点？

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

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

两者都很有效。在进行更改时，请确保已完全清除缓存

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

我不再使用这个笨重的编辑器了。创造了我自己的。 但是，要解决此问题，请使用EM或SPAN而不是I标记。

请查看以下内容：

基本上，您应该下载zip格式的fontawesome插件，并解压缩到名为“fontawesome”的“ckeditor/plugins/”。 然后，打开“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的方式相同

干杯

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

此解决方案正确适用于4.11.4

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

config.protectedSource.push（//g）；//字体可怕的修复

Goodluck

而不是：

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

config.protectedSource.push（//g）；

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

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

config.protectedSource.push（//g）；

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

---

（使用CKEDITOR.dtd命名：）

。$removempty['i']=false；在初始加载时工作，但我发现编辑或在源代码和所见即所得之间切换会删除标记。受保护的源代码可以工作，但有一个限制，就是你不能真正看到图标。现在有多个插件。这一个，当检查源链接，导致相当丑陋的垃圾邮件。我要再吃一个。

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);