CKEditor 4.5拖放图像上传 - 如何在json响应中返回新维度？

Question

我使用CKEditor 4.5.1拖放图像上传.非常好的功能!在服务器端,我正在调整大图像的大小.我的JSON响应返回调整大小的图像URL(在响应中由'url'设置),这是在成功上载文件后在CKEditor窗口中显示的图像.但插入的img标签的高度和宽度属性设置为原始图像的值,而不是我调整大小的图像.有没有办法返回新的高度和宽度值？或者有没有人知道如何破解这个？

更一般地说,是否有任何资源描述了JSON响应中的所有可能值？我看到它提到某个地方尚未记录,但希望有人可能知道并花时间分享.

Answer 1

上传图像完成后,CKEditor将使用最终HTML替换上载窗口小部件(其中包含源中包含Base64数据的图像).上传的图像与上传的图像具有相同的尺寸,以防止在更换期间闪烁.以下是执行此替换的行.

如果上传图像时闪烁对您来说不是问题,那么您可以简单地覆盖此方法:

editor.on( 'instanceReady', function() {
    editor.widgets.registered.uploadimage.onUploaded = function ( upload ) {
        this.replaceWith( '<img src="' + upload.url + '">' );
    }
} );

现在,我们在哪里可以获得图像尺寸？

一种选择是加载图像(upload.url)并在浏览器中读取其尺寸.但是,这是一个异步操作,因此它可能会影响撤消管理器,我不会推荐它.

因此,如果您知道可以在服务器响应中发送的新维度.如果你把它们放在你的JSON响应中:

{
    "uploaded": 1,
    "fileName": "foo.jpg",
    "url": "/files/foo.jpg",
    "width:" 300,
    "height:" 200
}

你需要在响应中处理它们(我们很可能很快就会简化这一点):

editor.on( 'fileUploadResponse', function( evt ) {
    var fileLoader = evt.data.fileLoader,
        xhr = fileLoader.xhr,
        data = evt.data;

    try {
        var response = JSON.parse( xhr.responseText );

        // Error message does not need to mean that upload finished unsuccessfully.
        // It could mean that ex. file name was changes during upload due to naming collision.
        if ( response.error && response.error.message ) {
            data.message = response.error.message;
        }

        // But !uploaded means error.
        if ( !response.uploaded ) {
            evt.cancel();
        } else {
            data.fileName = response.fileName;
            data.url = response.url;
            data.width = response.width;
            data.height = response.height;

            // Do not call the default listener.
            evt.stop();
        }
    } catch ( err ) {
        // Response parsing error.
        data.message = fileLoader.lang.filetools.responseError;
        window.console && window.console.log( xhr.responseText );

        evt.cancel();
    }
} );

要了解更多信息,请检查editor#fileUploadResponse事件以及"上载已删除或已粘贴的文件"指南.

然后您可以在上传小部件中使用它们:

editor.on( 'instanceReady', function() {
    editor.widgets.registered.uploadimage.onUploaded = function( upload ) {
        this.replaceWith( '<img src="' + upload.url + '" ' +
            'width="' + upload.width + '" ' +
            'height="' + upload.height + '">' );
    }
} );

PS.我们正在考虑在核心中包含这样一个功能,但由于发布量很大,我们不得不在某些时候限制它以使其最终生动.这种功能很快就会很快被包含在核心中,并且只需要进行配置.