使用Javascript或jQuery清除WYSIWYG编辑器的HTML输出

我使用的CMS有一个非常烦人的所见即所得编辑器，名为Summernote。这个编辑器看起来很不错，并且实际上工作得很好，但是它输出的HTML令人震惊地不好，并且没有用于样式输出的任何配置选项。例如，这是一些带下划线的粗体，斜体文本：

<span style="text-decoration: underline;">
    <span style="font-style: italic;">
        <span style="font-weight: bold;">
            Help!! I'm being squashed by 3 heavy tags.
        </span>
    </span>
</span>

图像具有内联CSS样式，使图像具有固定的宽度，这对于响应式站点是无用的：

<img src="..." style="width:832px;">

YouTube iFrame具有固定尺寸，可以从手机屏幕上弹出：

<iframe src="..." width="560" height="380">

因此，如您所见，这不是很好，但是我不能更改编辑器（不允许这样做），并且我需要想出一种方法来纠正这些问题，然后再将HTML保存到数据库中。就我而言，使用jQuery。

因此，经过一番尝试和错误，我设法通过以下小片段修复了响应性问题：

var code = $('#summernote').code();
var newCode = $('<div></div>').append(code)
    .find('iframe').wrap('<div class="flexVideo"/>')
    .end()
    .find('img').removeAttr('style').wrap('<div class="flexPhoto"/>')
    .end()
    .html();

正在运行的JSFIDDLE演示。

如您所见，这会将所有iFrame包裹在一个响应式包装中，将所有图像包装在另一个包装中（出于非响应目的），并从图像中删除所有内联样式，使它们更加流畅。这很好用，但是我在最后一部分上确实很挣扎。用适当的元素替换所有这些span标签，很遗憾，我需要寻求帮助。

我了解使用类似的方法可以选择SPAN元素为BOLD并使用，wrapInner()并且unwrap()可以使用适当的文本元素替换范围：

$('span').filter(function() {
     return $(this).css('font-weight') == 'bold';
}).wrapInner('<b></b>').unwrap()

但

1）我什wrapInner()至无法独自进行工作（请检查此小提琴）。

2）如果实际上可行，无论是在身体上还是在效率上，请提供建议，并建议如何将它们全部链接在一起。

3）有时跨度顺序会有所不同，具体取决于单击的按钮的顺序。

这是我的伪劣，尝试失败：

var code = $('#summernote').code();
var newCode = $('<div></div>').append(code)
    .find('iframe').wrap('<div class="flexVideo"/>')
    .end()
    .find('img').removeAttr('style').wrap('<div class="flexPhoto"/>')
    .end()
    .find('span').filter(function() {
        return $(this).css('font-weight') == 'bold';
    })
    .wrapInner('<b></b>')
    .unwrap()
    .end()
    .html();

请参阅此失败的JSFIDDLE演示。没有错误，但是肯定不是按照所告诉的那样做的。我曾尝试大喊大叫，但这没用。

惊人的答案

对于所有那些挫败的Summernote用户，您可能会发现这很有用。为什么很棒？好吧，尽管在此示例中将其分为多行，但这实际上是单线的！！

var newCode = $('<div></div>').append(code)
   .find('iframe')
       .wrap('<div class="flexVideo"/>')
   .end()
   .find('img')
       .removeAttr('style')
       .wrap('<div class="flexPhoto"/>')
   .end()
   .find('span')
       .filter("[style*='underline']")
           .removeAttr('style')
           .addClass('underline')
       .end()
       .filter("[style*='bold']")
           .wrapInner('<b></b>')
           .children()
               .unwrap()
           .end()
       .end()
       .filter("[style*='italic']")
           .wrapInner('<i></i>')
           .children()
               .unwrap()
           .end()
       .end()
   .end()
   .html();

它有什么作用？

• 从图像中删除内联样式以限制响应速度。
• 将图像包裹在DIV中（个人喜好，可以使用按钮和文本覆盖图像）。
• 将iframe视频包装在DIV中以提高响应速度。
• 将内联替换text-decoration:underline为class underline。
• <span style="font-style:italic">用适当的<i>标签替换标签。
• <span style="font-weight:bold">用适当的<b>标签替换标签。