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

【问题标题】：After image is deleted WordPress visual editor doesn't remove additional code that I added to default img html output via image_send_to_editor filter删除图像后，WordPress 可视化编辑器不会删除我通过 image_send_to_editor 过滤器添加到默认 img html 输出的附加代码
【发布时间】：2017-12-26 03:03:35
【问题描述】：

我正在尝试用响应式图像图片标签替换 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 的人做这个，我确信如果他们编辑帖子中的图像，他们将无法从文本编辑器中删除剩余代码，所以我需要弄清楚为什么是发生这种情况，我该如何解决？

【问题讨论】：

您是否使用了任何缓存插件，如果有，您是否尝试过清除这些缓存？
我正在使用 w3 总缓存，但目前已禁用。奇怪的是，这件事似乎完全自己解决了，因为它似乎不再发生了。我不确定这是我做的事情还是其他什么，但我只是尝试再次编辑帖子，现在删除并替换图像后没有更多剩余代码。
我最好的猜测是，这是由于您的浏览器缓存造成的 - 如果它再次发生，您可以尝试删除它，看看是否可以解决它。
我不认为这是由于浏览器缓存，因为剩余代码仍然存在于数据库中，并且在 worpress 文本编辑器中可见。奇怪的是它自己解决了，但重要的是它现在可以工作了。 :)

标签： wordpress

【解决方案1】：

这是因为在删除图像时，可视化编辑器只删除了 img 标签中的图像，而 HTML 的其余部分仍然存在。在更新时，它会更新数据库中的 HTML。此外，它将以前的 HTML 附加到新的 HTML。

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

【讨论】：