ckeditor - 用很棒的字体图标替换 CKEditor 工具栏图像

标签 ckeditor font-awesome

是否有某种方法可以用 Font Awesome 图标替换默认的工具栏图像(例如粗体、斜体等)?

最佳答案

我知道这是一个老问题,但在逐个插件的基础上,我已经能够在插件的 init 函数中使用以下代码向 ckeditor 按钮添加字体很棒的图标。就我而言,我的插件名为 trim:

//Set the button name and fontawesome icon
var button_name = 'trim';
var icon = 'fa-scissors';

//When a ckeditor with this plugin in it is created, find the button
//in the current instance and add the fontawesome icon
CKEDITOR.on("instanceReady", function(event) {
  var this_instance = document.getElementById(event.editor.id + '_toolbox');
  var this_button = this_instance.querySelector('.cke_button__' + button_name + '_icon');
  if(typeof this_button != 'undefined') {
    this_button.innerHTML = '<i class="fa ' + icon + '" style="font: normal normal normal 14px/1 FontAwesome !important;"></i>';
  }
});

它取决于了解按钮内跨度的类,因此它可能不是最方便的,但它可以工作。

关于ckeditor - 用很棒的字体图标替换 CKEditor 工具栏图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24450396/

相关文章:

java - Jetty 9 FontAwesome 空图标

ruby-on-rails - 我无法让 ckeditor 允许除基本属性之外的任何内容,并且无法关闭/配置高级内容编辑器 (rails)

javascript - 设置工具栏背景色为白色,无渐变

javascript - 防止ckeditor在按键上显示字符

javascript - 如何正确销毁CKEditor实例?

css - Font Awesome fa-spin 绕着错误的中心旋转

angular - 如何为 Angular "@ckeditor/ckeditor5-angular"添加插件到 CKEditor?

swift - 来自 String 的 FontAwesomeSwiftKit 枚举

reactjs - 当我使用 mdbreact 组件时,没有出现样式或图标 - 页脚

javascript - 将 FontAwesome 图标显示为 svg