javascript - CKEditor 上传回调

Question

我正在尝试配置 CKEditor 以允许用户从她的计算机上传图像。我正在使用 filebrowserUploadUrl，因此我可以将图像上传到服务器并取回分配给它的 URL，但我不知道如何将 URL 传递给实际的编辑器...

网络上的一些例子谈到从服务器返回类似 <script>parent.CKEDITOR.tools.callFunction ... 的东西，不过我觉得挺难看的，有没有办法告诉CKEditor“图片上传后，调用这个函数”？

Answer 1

服务器不应返回 javascript 供客户端呈现。

尽管下面是一个丑陋丑陋的...丑陋的 hack..我仍然更喜欢它而不是从服务器发送 javascript:

(上传图片后在编辑器中自动插入图片的示例 - 适用于 4.4.7)

var onUploadImage = function (dialog) {

    // Get the contents in the iframe
    var iframe = $('.cke_dialog_ui_input_file iframe');
    iframe.one('load', function(ev) {
        var fileUrl = ev.target.contentDocument.body.innerText;
        dialog.getContentElement('info', 'txtUrl').setValue(fileUrl);
        $(".cke_dialog_ui_button_ok span").click();
    });
};

var onLoadImageDialog = function () {
    var dialog = CKEDITOR.dialog.getCurrent(); 

    // Open default tab
    this.selectPage('Upload');

    $('.cke_dialog_ui_fileButton').click(onUploadImage.bind(null, dialog));
};

var onDialogDefinition = function( ev ) {
    var name = ev.data.name;
    var definition = ev.data.definition;
    if ( name !== 'image' ) {
        return;
    }
    definition.onLoad = onLoadImageDialog
};

CKEDITOR.on('dialogDefinition', onDialogDefinition);

当然，正确的方法是创建一个自定义插件。