Question

我使用CKEditor 4.5.1拖放图像上传。非常好的功能！在服务器端，我正在调整大图像的大小。我的JSON响应返回调整大小的图像URL（由响应中的＆＃39; url＆＃39;设置），这是在成功上载文件后在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 + '">' );
    }
} );

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

Answer 2

@迈克尔，谢谢你的回答。我还测试过，可以说fileUploadResponse不是必需的。

可以像这样从instanceReady到达响应数据（如果存在于来自服务器的服务器的响应中）

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

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

2 个答案: