<a href="http://docs.ckeditor.com/#!/guide/skin_sdk_icons" rel="nofollow noreferrer">documentation on skin icons</a>을 읽은 후에 스킨

Question

을 통해 특정 CKEditor 도구 모음 단추 아이콘을 변경합니다. 이미지의 아이콘을 덮어 쓰려면 자신의 단추 아이콘을 정의하는 방법이 여전히 궁금합니다. 나는 이미 icons/image.png 파일로 커스텀 스킨을 구현했다. (여기서 image은 버튼의 이름이다) 충분하지 않다. 어떻게해야합니까?

는 명확히하기 위해 :이 아이콘을 대체 할이 비슷한 시나리오에 대한 나의 접근 방식이다

Answer 1

.

기본 이미지 아이콘 및 다른 원치 않는 아이콘을 사용 중지했습니다.

나는 자신의 버튼과 아이콘을 추가했는데 기본 글꼴 대신 글꼴 멋진 아이콘을 사용했습니다.

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

     } 
    } 
});