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);
                        }
                    });
            }
        });
    }
} );

編輯：

因此，最后，我創建了一個名為KCFinderHelper.js的單獨文件，該文件可以在我需要的任何位置導入和使用。 （我的最終代碼實際上要長得多，因為我添加了更多的功能和按鈕）

Answer 2

在dialogDefinition事件上擴展對話框。 請參閱我以前的答案以了解更多信息。 另請參閱“圖像”對話框的現有實現 ，以了解定義的外觀。