使用 Font Awesome 图标替换 CKEditor 工具栏图像

Question

有没有办法用 Font Awesome 图标替换默认的工具栏图像（例如 Bold、Italic 等）？

- Daniel

Answer 1

我知道这是一个老问题，但是通过逐个插件的方式，我已经能够在插件的init函数中使用以下代码将font-awesome图标添加到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>';
  }
});

这取决于了解按钮内部span的类别，所以它可能不是最方便的方法，但它有效。

- FellowSolicist

Answer 2

最好的事情是您可以在CKEditor上使用Bootstrap主题，或者您可以使用Froala编辑器，它具有内置的图片上传器

- TechGuy

---

这不是关于上传图像的问题，而是要用Awesome Icons替换工具栏图标。 - Ben