通过 Skin 更改特定的 CKEditor 工具栏按钮图标

Question

看完documentation on skin icons我仍然想知道如何定义一个自己的按钮图标来覆盖核心的图像图标。我已经使用文件 icons/image.png（其中 image 是按钮的名称）实现了自定义外观，但这还不够。我能做什么？

澄清一下：我想更换这个图标：

Answer 1

这是我针对类似情况的方法。

我禁用了默认图像图标和其他不需要的图标。

我添加了自己的按钮和图标，我使用了 font awesome icons 而不是默认的 png。

//In the config.js
var editor;

var plgnIconSize = "16px";
var plgnIcons = ["fa-file-image-o", ...];
var plgnNames = 'img,... Other plugins';
var plgnDefault = 'fa-plug';

CKEDITOR.editorConfig = function (config) {

    config.toolbar = [
        { name: 'uploader', items: ['img'] },
        // Your other plugins as per your need goes here 
    ];

    config.extraPlugins = plgnNames;
});

CKEDITOR.on("instanceReady", function (event) {

    editor = event.editor;

    var this_instance = document.getElementById(event.editor.id + '_toolbox');

    var plugins = plgnNames.split(',');
    for (var i = 0; i < plugins.length; i++) {
       var this_button = this_instance.querySelector('.cke_button__' + plugins[i] + '_icon');

        if (typeof this_button !== null) {
            var icon;
            if (typeof plgnIcons[i] === 'undefined')
                 icon = plgnDefault
            else
                 icon = plgnIcons[i];

            if (typeof this_button !== notdefined) {
                 this_button.innerHTML = '<i class=" ' + plgnClass[i] + ' fa ' + icon + '" style="font: normal normal normal ' + plgnIconSize + '/1 FontAwesome !important;cursor: default;"></i>';
            }

        }
    }
});

通过 Skin 更改特定的 CKEditor 工具栏按钮图标

Change a particular CKEditor toolbar button icon via Skin

ckeditor

ckeditor4.x