如何使用CKEditor 5设置响应图像？ [英] How to set responsive images with CKEditor 5?

问题描述

使用 简单上传适配器 ，根据CKEditor 5文档，成功上传图像后，服务器应返回以下任意一个：

针对单个图像：

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

或者多个（例如srcset属性）

  {
默认值：'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 
} 
  

对于初学者来说，文档根据此SO帖子，该日期不正确，所以我不是惊讶的是这行不通。但是，有人知道CKEditor 5期望哪种响应格式正确地插入/构建srcset属性吗？它确实使用默认值键，但似乎忽略了其他键！

解决方案

在上传适配器的 _initListeners 函数内，您会发现Promise 仅 可以通过以下方式解决：

  resolve（{
默认：response.url 
}）; 
  

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

  resolve（response.urls）; 
  

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

我最终使用以下命令，因为我忽略了服务器中的空键

  if（response.hasOwnProperty（'url'））{
 resolve （{{
默认值：response.url 
}）； 
}否则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}

Using the Simple Upload Adapter, according to the CKEditor 5 documentation upon a successful image upload, the server should return either:

This for a single image:

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

Or this for multiple (i.e. for the srcset attribute)

{
    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'
}

For starters the documentation is incorrect as per this SO post, so I'm not surprised this doesn't work. But does anyone know what response format CKEditor 5 is expecting for it to correctly insert/build the srcset attribute? It does take the default key but seems to ignore the others!

解决方案

Inside of the _initListeners function of the upload adapter you will find that the Promise only resolves with the following:

resolve( {
    default: response.url
} );

The solution - change the Promise to resolve the following:

resolve( response.urls );

Note, in this example the response object may have either keys url or urls.

I ended up using the following as I ignore null keys in my server responses.

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

---

As a sidenote, if you've read through the other SO post I referred to, I would also recommend removing this (see commented section):

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

I'm not a fan of using arbitrary flags in response, if the upload failed then I would rather see a HTTP status code indicating it, I can't see any reason why we need to return 200 and { "uploaded" : false }

这篇关于如何使用CKEditor 5设置响应图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！