Пользовательская кнопка в браузере файлов CKEditor

Question

CKeditor имеет встроенный просмотр и загрузку файлов. Он может быть интегрирован со многими внешними плагинами, включая CKFinder или даже KCFinder (бесплатная альтернатива).

Как я могу добавить пользовательскую кнопку на существующей панели по умолчанию? (Например, кнопка сжатия изображения под предварительным просмотром, которая вызовет мой внешний PHP-скрипт).

Answer 1

ОК, поэтому я прочитал код, написанный в другом ответе, но все еще не был ясен и должен был погрузиться в документацию. Наконец-то мне удалось решить эту проблему, не знаю, где ее добавить, поэтому я поместил ее в свою функцию $ (document) .ready(). Открыт для предложений на лучшее место, чтобы поставить его, но он работает:

CKEDITOR.on('dialogDefinition', function(evt) { 
    var dialog = evt.data; 
    if (dialog.name == 'image') { 
     // Get dialog we want 
     var def = evt.data.definition; 

     //Get The Desired Tab Element 
     var infoTab = def.getContents('info'); 

     //Add Our Button 
     infoTab.add({ 
      type: 'button', 
      id: 'buttonId', 
      label: 'Compress Image', 
      title: 'My title', 
      onClick: function() { 
       //Here define what to do when button is clicked. 
       //In my case, I traverse and get the inputs (dirty way). 
        var url = $(".cke_dialog_ui_vbox_child .cke_dialog_ui_text .cke_dialog_ui_labeled_content .cke_dialog_ui_input_text .cke_dialog_ui_input_text").eq(0).val(); 
        var width = $(".cke_dialog_ui_vbox_child .cke_dialog_ui_text .cke_dialog_ui_labeled_content .cke_dialog_ui_input_text .cke_dialog_ui_input_text").eq(2).val(); 
        var height = $(".cke_dialog_ui_vbox_child .cke_dialog_ui_text .cke_dialog_ui_labeled_content .cke_dialog_ui_input_text .cke_dialog_ui_input_text").eq(3).val(); 

       //Then I perform an ajax call to a Php file        
        $.ajax({ 
        url: 'path/to/compress.php', 
        data: { 
         url: url, 
         width: width, 
         height: height, 
         }, 
        type: 'post', 
        success: function(output) { 
         alert(output); 
         } 
        }); 
      } 
     }); 
    } 
}); 

EDIT:

Таким образом, в конце концов, я создал отдельный файл с именем KCFinderHelper.js, который я импортировать и использовать везде, где мне нужно Это. (мой последний код на самом деле намного длиннее, поскольку я добавил еще много функций и кнопок)

Answer 2

Развернуть диалоговое окно dialogDefinition. Смотрите мой previous answer, чтобы узнать больше. Также см. Диалог existing implementation диалогового окна «Изображение», чтобы узнать, как выглядит определение.