CKEditor 中的上传回调答案

【问题标题】：Upload callback in CKEditorCKEditor 中的上传回调
【发布时间】：2011-02-13 21:28:39
【问题描述】：

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

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

【问题讨论】：

标签： javascript ckeditor

【解决方案1】：

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

即使以下是丑陋的丑陋......丑陋的黑客......我仍然更喜欢它而不是从服务器发送 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);

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

【讨论】：

【解决方案2】：

再次阅读语法：你得到 CKEDITOR 对象并告诉它回调一个函数，所以它完全符合你的要求。

【讨论】：

是的，对不起，我的意思是：有没有办法从客户端（javascript）设置回调，而不是让服务器返回 javascript 调用本身？
不，这会比当前的 API 更复杂。