如何使用 CKEditor 5 设置响应式图像？

Question

使用 Simple Upload Adapter，根据 CKEditor 5 文档，成功上传图片后，服务器应返回：

这对于单个图像：

{
    default: 'http://example.com/images/image–default-size.png'
}

或者这个对于多个（即对于 srcset 属性）

{
    default: 'http://example.com/images/image–default-size.png',
    '160': 'http://example.com/images/image–size-160.image.png',
    '500': 'http://example.com/images/image–size-500.image.png',
    '1000': 'http://example.com/images/image–size-1000.image.png',
    '1052': 'http://example.com/images/image–default-size.png'
}

对于初学者来说，根据this SO post，文档是不正确的，所以我并不惊讶这不起作用。但是有谁知道 CKEditor 5 期望它正确插入/构建 srcset 属性的响应格式是什么？它确实需要default 键，但似乎忽略了其他键！

Answer 1

在上传适配器的 _initListeners 函数中，您会发现 Promise only 解析如下：

resolve( {
    default: response.url
} );

解决方案 - 更改 Promise 以解决以下问题：

resolve( response.urls );

注意，在此示例中，响应对象可能具有键 url 或 urls。

我最终使用了以下内容，因为我忽略了服务器响应中的空键。

if ( response.hasOwnProperty( 'url' ) ) {
    resolve( {
        default: response.url
    } );
} else if ( response.hasOwnProperty( 'urls' ) ) {
    resolve( response.urls );
}

---

作为旁注，如果您已经阅读了我提到的其他 SO 帖子，我还建议您删除它（请参阅评论部分）：

if ( !response /** || !response.uploaded */ ) {
    return reject( response && response.error && response.error.message ? response.error.message : genericError );
}

我不喜欢使用任意标志作为响应，如果上传失败，那么我宁愿看到指示它的 HTTP 状态代码，我看不出有任何理由需要返回 200 和 { "uploaded" : false }