Question

CKeditor具有内置的文件浏览和上传功能。它可以与许多外部插件集成，包括CKFinder甚至KCFinder（免费替代）。

enter image description here

如何在现有默认面板上添加自定义按钮？（例如，预览下的压缩图像按钮会调用我的外部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事件上扩展对话框。请参阅我的previous answer了解更多信息。另请参阅“图像”对话框的existing implementation以了解定义的外观。

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

2 个答案: