javascript - 在 TinyMCE 中使用响应式图像(尺寸 + srcset)

Question

我想在上传图像时将 TinyMCE 生成的 img-tags 更改为响应式同上，如下所示(使用 lazysizes ):

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
                 image2.jpg 600w,
                 image3.jpg 900w"
    class="lazyload" />

在已弃用(对我来说没用)MCImageManager you could do this :

imagemanager_insert_template : '<img src="{$url}" />'

TinyMCE 中有类似的东西吗？在核心或某些(免费)插件中？我可以完全控制我上传图像的后端，并且我已经在那里调整大小(使用 ImageSharp )。

Answer 1

编辑 :此答案仅适用于 Wordpress TinyMCE。我没有看到这个问题与 Wordpress 无关。

很老的问题，但我最近遇到了同样的问题。
可以挂 image_send_to_editor过滤器，仅适用于 TinyMCE。
在这个钩子(Hook)上，你可以应用到输出， wp_filter_content_tags负责更改某些标记的函数。
目前它增加了 srcset , sizes , 和 loading img 的属性HTML 标记。
所以你可以像这样使用它:

/**
 * Change the image markup to include srcset and sizes
 * when using tinyMCE editor
 *
 * @param $html
 * @param $id
 * @param $alt
 * @param $title
 * @param $align
 * @param $url
 * @param $size
 * @return string
 * @throws Exception
 */
function storms_img_markup( $html, $id, $caption, $title, $align, $url, $size, $alt, $rel ) {
    return wp_filter_content_tags( $html );
}
add_filter( 'image_send_to_editor', 'storms_img_markup', 10, 9 );

此代码可能需要一些额外的验证，但它适用于 Wordpress 5.6