首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >与TinyMCE一起使用响应图像(大小+ srcset)

与TinyMCE一起使用响应图像(大小+ srcset)
EN

Stack Overflow用户
提问于 2017-06-20 12:37:53
回答 1查看 991关注 0票数 6

我希望在上传图像时将TinyMCE生成的img标记更改为响应同上,如下所示(使用lazysizes):

代码语言:javascript
复制
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
                 image2.jpg 600w,
                 image3.jpg 900w"
    class="lazyload" />

在不推荐的(对我来说没有用) MCImageManager 你能做到的

代码语言:javascript
复制
imagemanager_insert_template : '<img src="{$url}" />'

在TinyMCE中有类似的东西吗?无论是在核心还是一些(免费)插件中?我完全控制我上传图片的后端,并且我已经在那里进行调整(使用ImageSharp)。

EN

回答 1

Stack Overflow用户

发布于 2021-01-25 04:27:23

  • 编辑:这个答案只适用于Wordpress TinyMCE。我看不出这个问题与Wordpress无关。

很老的问题,但我最近也遇到了同样的问题。

您可以挂接image_send_to_editor过滤器,这仅适用于TinyMCE。

在这个钩子上,您可以应用到输出,即负责更改某些标记的wp_filter_content_tags函数。目前它将srcsetsizesloading属性添加到img HTML标记中。

所以你可以这样使用它:

代码语言:javascript
复制
/**
 * 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上工作

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44653293

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档