Question

我在我的网站上使用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

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

Answer 1

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

你所拥有的东西会干扰img标签。 AND OR，在所有配置之后：

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

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

*编辑一个人在搞乱其他事情的同时工作。一个没有解决方案。

我停止使用这个庞大的编辑器。创造了我自己的。但是，要解决此问题，请使用EM或SPAN代替I标记。

Answer 2

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

Answer 3

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

此解决方案可在4.11.4上正常工作

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

祝你好运

Answer 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）

Answer 5

看看这个：ckeditor fontawesome addon。

基本上，您应该以zip格式下载fontawesome插件，然后使用名称＆＃34; fontawesome＆＃34;提取到＆＃34; ckeditor / plugins /＆＃34;。然后，打开＆＃34; ckeditor / config.js＆＃34;并发出新插件的使用信号：

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

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

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

最后一步是使用toolbargroupname：＆＃34; FontAwesome＆＃34;在工具栏中：

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

这是demo。

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

干杯

将Fontawesome添加到ckeditor

5 个答案: