CKEditor 4.5拖放图像上传 - 如何在json响应中返回新维度？ [英] CKEditor 4.5 drag and drop image upload - how to return new dimensions in json response?

问题描述

我使用CKEditor 4.5.1拖放图片上传。非常好的功能！在服务器端我调整大图像的大小。我的JSON响应返回调整大小的图像url（由响应中的url设置），这是在成功文件上传后CKEditor窗口中显示的图像。但是插入的img标签的height和width属性设置为原始图片的值，而不是我调整大小的图片。有没有办法返回新的高度和宽度值？

I have drag and drop image uploads working using CKEditor 4.5.1. Very nice feature! On the server side I am resizing large images. My JSON response returns the resized image url (set by 'url' in the response) and that is the image that is shown in the CKEditor window after the successful file upload. But the img tag inserted has the height and width attributes set with the values from the original image, not my resized image. Is there a way to return the new height and width values? Or does anyone have an idea of how to hack around this?

更一般来说，是否有任何资源描述JSON响应中的所有可能的值？

And more generally, is there any resource which describes all possible values in the JSON response? I saw it mentioned somewhere that it wasn't documented yet but hopefully someone might know and take the time to share.

推荐答案

当我们看到它的时候没有记录，但希望有人知道并花时间分享。上传图像完成CKEditor用最终的HTML替换上传窗口小部件（其中包含源中带有Base64数据的图像）。上传的图片与上传的图片具有相同的尺寸，以防止在此替换过程中闪烁。这里有您可以替换的行： https：// github .com / ckeditor / ckeditor-dev / blob / a513a92 / plugins / uploadimage / plugin.js＃L60-L62 。

When uploading an image finishes CKEditor replaces an upload widget (which contains an image with Base64 data in the source) with the final HTML. Uploaded image has the same dimensions as the one being uploaded to prevent from blinking during this replacement. Here you have lines which do this replacement: https://github.com/ckeditor/ckeditor-dev/blob/a513a92/plugins/uploadimage/plugin.js#L60-L62.

如果图片闪烁上传不是你的问题，那么你可以简单地覆盖这个方法：

If blinking when an image is uploaded is not a problem for you, then you can simple overwrite this method:

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

现在，从哪里获取图片尺寸？

Now, where to get the image dimensions from?

一个选项是加载图片（ upload.url ），并在浏览器中读取其尺寸。但是，这是一个异步操作，因此它可能会影响撤销管理器，我不会推荐它。

One option is to load the image (upload.url) and read its dimensions in the browser. However, this is an asynchronous operation, so it may affect the undo manager and I would not recommend it.

因此，如果你知道新的维度，服务器响应。如果您将它们放在JSON响应中，如下所示：

Therefore, if you know new dimensions you can send then in the server response. If you put them in your JSON response like this:

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

您需要在响应中处理（我们很可能会简化这个位）：

You need to handle then in the response (we'll most likely simplify this bit soon):

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();
    }
} );

要了解详情，请查看 编辑器＃fileUploadResponse 事件和

To learn more check the editor#fileUploadResponse event and the Uploading Dropped or Pasted Files guide.

然后，您可以在上传窗口小部件中使用它们：

Then you can use them in the upload widget:

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

PS。我们正在考虑在核心中包括这样的功能，但是因为发布是巨大的，我们必须限制它在某一点，以最终生存。有很大的机会，这样的功能将很快被包括在核心，只需要配置。

PS. We were considering including such feature in the core, but because the release was huge we had to limit it at some point to bring it finally to live. There is a great chance that such feature will be included in the core soon and only configuration will be needed.

这篇关于CKEditor 4.5拖放图像上传 - 如何在json响应中返回新维度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！