Question

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

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

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

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

Answer 2

再次阅读语法：获取CKEDITOR对象并告诉它回调函数，因此它完全符合您的要求。

在CKEditor中上传回调

2 个答案: