用字体真棒图标替换CKEditor工具栏图像

时间:2014-06-27 11:11:00

标签: ckeditor font-awesome

有没有办法用Font Awesome图标替换默认工具栏图像(例如Bold,Italic等)?

2 个答案:

答案 0 :(得分:3)

我知道这是一个老问题,但是在插件基础上的插件我已经能够在插件内添加字体 - 真棒图标到ckeditor按钮,其中包含以下代码init功能。就我而言,我的插件名为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>';
  }
});

它取决于知道按钮内部的跨度类,所以它可能不是最方便但它有效。

答案 1 :(得分:0)

最好的是你可以在CKEditor上使用Bootstrap主题,或者你可以使用Froala编辑器,它有内置的图像上传器