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

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

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

2 回答

上传图像完成后，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 . 我们正在考虑在核心中包含这样一个功能，但由于发布量巨大，我们不得不在某些时候限制它以使其最终生动 . 这种功能很快就会很快被包含在核心中，并且只需要进行配置 .

回复于 2024-04-28T18:54:02+08:00

@迈克尔，谢谢你的回答 . 我还测试过，可以说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 + '">' );
    }
} );

回复于 2024-04-28T18:54:02+08:00

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

2 回答

相关问题