Wordpress TinyMCE&；wisywyg strips&；变化跨度

好的，我想在我的Wordpress页面中实现一个响应图像。为此，我找到了一篇文章，让我学会了如何使用Picturefill

这是我在TINYMCE编辑器中的代码：

<span data-picture data-alt="My responsive image">
    <span data-src="http://localhost:88/mywpwebsite/wp-content/uploads/2014/03/picture_200.png"></span>
   <span data-src="http://localhost:88/mywpwebsite/wp-content/uploads/2014/03/picture_300" data-media="(min-width: 768px)"></span>
   <span data-src="http://localhost:88/mywpwebsite/wp-content/uploads/2014/03/picture_400.png" data-media="(min-width: 1200px)"></span>
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="picture_200.png" alt="My responsive image">
    </noscript>
</span>

当我从TINYMCE编辑器更改为wisywyg编辑器时，它会将我的代码剥离为以下内容：

<span data-picture="" data-alt="My responsive image"><span data-picture="" data-alt="My responsive image">



<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --><noscript>
        <img src="picture_200.png" alt="My responsive image">
</noscript></span></span>&nbsp;

当我停留在TINYMCE上并保存页面时，它可以工作，但我的浏览器中有一些空间。如果我看一下源代码，我会看到：

<span data-picture data-alt="My responsive image"><br />
    <span data-src="http://localhost:88/Controle_direct_WP/wp-content/uploads/2014/03/energieprestatiecertificaat_200.png"></span><br />
   <span data-src="http://localhost:88/Controle_direct_WP/wp-content/uploads/2014/03/energieprestatiecertificaat_300.png" data-media="(min-width: 768px)"></span><br />
   <span data-src="http://localhost:88/Controle_direct_WP/wp-content/uploads/2014/03/energieprestatiecertificaat_400.png" data-media="(min-width: 1200px)"></span><br />
</span><br />
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --></p>
<noscript>
        <img src="picture_200.png" alt="My responsive image"><br />
    </noscript>

我认为出现问题是因为span标签。但我似乎找不到一个好的解决办法。我无法禁用wisywyg编辑器，因为我的客户端将来必须更改内容本身