用字体真棒图标替换CKEditor工具栏图像 [英] Replace CKEditor toolbar images with font awesome icons

问题描述

是否有某种方法可以用Font Awesome图标替换默认的工具栏图像（例如，粗体，斜体等）？

Is there some way to replace the default toolbar images (e.g. Bold, Italic, etc.) with Font Awesome icons?

推荐答案

我知道这是一个老问题，但是在插件的基础上，我已经能够在插件的 init 功能。在我的情况下，我的插件名为 trim ：

I know this is an old issue, but on a plugin by plugin basis I've been able to add font-awesome icons to ckeditor buttons with the following code inside the plugin's init function. In my case my plugin was called 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>';
  }
});

这取决于了解按钮内部范围的类别，因此它可能不是最方便的但是可以。

It hinges on knowing the class of the span inside the button, so it might not be the most convenient but it works.

这篇关于用字体真棒图标替换CKEditor工具栏图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！