当前位置：文江博客话题详情

CKEditor 中的上传回调

发布于 2024-10-17 00:40:12 字数 272 浏览 2 评论 0原文

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

网上的一些例子谈论从服务器返回类似于

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒浓于脸红 2024-10-24 00:40:12

服务器不应返回 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);

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

The server shouldn't return javascript for the client to render.

Even though the following is an ugly ugly... ugly hack.. I still prefer it over sending javascript from the server:

(Example of automatically inserting the image in the editor once the image is uploaded - works with 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);

Of course, the right way would be to create a custom plugin.

回复收藏 0 原文