CODEWITHSUNDEEP
ckeditorckeditor4.x
Adrian Föder
Adrian Föder

Reputation: 891

Change a particular CKEditor toolbar button icon via Skin

after reading the documentation on skin icons I still wonder how to define an own button icon to overwrite the core's image icon. I've already implemented a custom skin with a file icons/image.png (where image is intended to be the button's name) but this doesn't suffice. What can I do?

To clarify: I want this icon to be replaced:

example of icon

Upvotes: 2

Views: 1995

Answers (1)

Ozesh
Ozesh

Reputation: 6964

This is my approach for a similar scenario.

I disabled the default image icon and other unwanted icons.

I added up my own buttons and for icons, I used font awesome icons instead of the default pngs.

//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>';
            }

        }
    }
});

Upvotes: 4

Related Questions