删除图像后，WordPress可视化编辑器不会删除我通过image_send_to_editor过滤器添加到默认img html输出的其他代码

Question

我正在尝试用响应图像图片标记替换WordPress编辑器中的默认图像html输出。我创建了一个自定义函数来替换默认的img html并通过image_send_to_editor过滤器将其挂钩到编辑器中：

function mystic_responsive_insert_image($html, $id, $caption, $title, $align, $url) {
    $image_url = wp_get_attachment_url($id);
    $attachment_id = attachment_url_to_postid( $image_url );
    $alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
    if ( !$alt_text ) { $alt_text = esc_html( get_the_title($post_id) ); }      
    $thumb_xl_hpt1 = wp_get_attachment_image_src($attachment_id, 'xl-thumb-hpt1');
    $thumb_lg_hpt1 = wp_get_attachment_image_src($attachment_id, 'lg-thumb-hpt1');
    $thumb_md_hpt1 = wp_get_attachment_image_src($attachment_id, 'md-thumb-hpt1'); 
    $thumb_sm_hpt1 = wp_get_attachment_image_src($attachment_id, 'sm-thumb-hpt1');
    $thumb_xs_hpt1 = wp_get_attachment_image_src($attachment_id, 'xs-thumb-hpt1');              
    $thumb_xl_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'xl-thumb-hpt1-2x');
    $thumb_lg_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'lg-thumb-hpt1-2x');
    $thumb_md_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'md-thumb-hpt1-2x'); 
    $thumb_sm_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'sm-thumb-hpt1-2x');
    $thumb_xs_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'xs-thumb-hpt1-2x');    
    $thumb_data = array(                    
        'thumb_xl_hpt1_2x'          => $thumb_xl_hpt1_2x[0],
        'thumb_large_hpt1_2x'   => $thumb_lg_hpt1_2x[0], 
        'thumb_medium_hpt1_2x'  => $thumb_md_hpt1_2x[0],
        'thumb_small_hpt1_2x'   => $thumb_sm_hpt1_2x[0],
        'thumb_xs_hpt1_2x'      => $thumb_xs_hpt1_2x[0],                    
        'thumb_xl_hpt1'             => $thumb_xl_hpt1[0],
        'thumb_large_hpt1'    => $thumb_lg_hpt1[0], 
        'thumb_medium_hpt1'   => $thumb_md_hpt1[0],
        'thumb_small_hpt1'    => $thumb_sm_hpt1[0],
        'thumb_xs_hpt1'         => $thumb_xs_hpt1[0],
        'thumb_alt'                     => $alt_text
    );

    $html = '<picture>';
    $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->';
    $html .= '<source srcset="' . $thumb_data['thumb_xl_hpt1'] . ', ' . $thumb_data['thumb_xl_hpt1_2x'] . ' 2x" media="(min-width: 1200px)">';
    $html .= '<source srcset="' . $thumb_data['thumb_large_hpt1'] . ', ' . $thumb_data['thumb_large_hpt1_2x'] . ' 2x" media="(min-width: 992px)">';
    $html .= '<source srcset="' . $thumb_data['thumb_medium_hpt1'] . ', ' . $thumb_data['thumb_medium_hpt1_2x'] . ' 2x" media="(min-width: 768px)">';
    $html .= '<source srcset="' . $thumb_data['thumb_small_hpt1'] . ', ' . $thumb_data['thumb_small_hpt1_2x'] . ' 2x" media="(min-width: 576px)">';
    $html .= '<!--[if IE 9]></video><![endif]-->';
    $html .= '<img srcset="' . $thumb_data['thumb_xs_hpt1'] . ', ' . $thumb_data['thumb_xs_hpt1_2x'] . ' 2x" alt="' . $thumb_data['thumb_alt'] . '">';
    $html .= '</picture>';
    return $html;
}
add_filter( 'image_send_to_editor', 'mystic_responsive_insert_image', 10, 9 );

然后我创建了一个测试帖并将图像插入其中以查看我的代码是否有效。确实如此。但是当我删除图像并插入另一个图像后，在chrome检查器内部，我注意到已删除图像中的其他html代码仍然存在于页面上。除了放置在图片标签内的img标签之外的所有内容仍然存在。从编辑器中删除图像仅删除了img标记。我正在为那些不熟悉html的人做这个，我确信如果他们在帖子中编辑图像，他们将无法从文本编辑器中删除剩余的代码，所以我需要弄清楚为什么是发生这种情况，我该如何解决？

Answer 1

这是因为在删除图像时，可视化编辑器仅删除img标记中的图像，其余HTML仍然存在。在更新时，它会更新数据库中的HTML。此外，它为以前的HTML添加了新的HTML。

您只需在保存之前过滤数据。必须删除没有图像的“图片”标签。你可以使用'wp_insert_post_data'钩子。