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

Question

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

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

Answer 1

上传图像完成后，CKEditor 用最终的 HTML 替换上传小部件(其中包含源中带有 Base64 数据的图像)。上传的图像与上传的图像具有相同的尺寸，以防止在此替换过程中闪烁。 Here are the lines做这个替换。

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

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 事件和 Uploading Dropped or Pasted Files指导。

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

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

附注。我们曾考虑在核心中包含这样一个功能，但由于发布量很大，我们不得不在某个时候限制它以最终实现它。很有可能很快就会将这样的功能包含在核心中，并且只需要进行配置。