CKEditor的文件浏览器上的“自定义”按钮

Question

CKeditor has a built-in File Browse and Upload. It can be integrated with many external plugins including CKFinder or even KCFinder (free alternative).

How can I add a custom button on the existing default panel? (For example, a compress image button under preview which would call my an external PHP script).

Answer 1

OK, so I read code written in another answer, but still wasn't clear and had to dive into documentation. I finally managed to settle for this fix, didn't know where to add it, so I put it into my $(document).ready() function. Open to suggestions on a better place to put it but it works:

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:

So, in the end, I created a separate file called KCFinderHelper.js which I import and use wherever I need it. (my final code is actually much longer as I added many more functions and buttons)

Answer 2

Extend the dialog on dialogDefinition event. See my previous answer to know more. Also see the existing implementation of the Image dialog to find out how the definition looks like.