Froala v2 编辑器在检索时破坏了我的代码答案

【问题标题】：Froala v2 editor mangles my code upon retrievalFroala v2 编辑器在检索时破坏了我的代码
【发布时间】：2016-02-09 02:19:52
【问题描述】：

我正在使用 Froala 编辑器 v2，但遇到了一个非常令人沮丧和间歇性的问题。我正在嵌入一个自定义 HTML 小部件（用户在自己的行上输入 URL 时的丰富预览）。但是当我检索到要保存到数据库中的最终 HTML 时，Froala 似乎决定在将 HTML 提供给我之前“清理”我的 HTML。当我在编辑内容时检查编辑器实例时，所有标记都处于良好状态。但是当我调用$('.froala-editor').froalaEditor('html.get') 来检索 HTML 时，URL 预览小部件的 HTML 完全被破坏了。

我的怀疑是，由于整个预览都包含在 <a> 标记中以使整个内容链接起来（而且我没有任何嵌套的 <a> 标记，因为那是糟糕的 HTML），Froala 正在使用其他结构元素，如 divs、h# 标签、p 标签等，并将包装 <a> 标签的副本放在所有这些元素中（正如您将在代码示例中看到的那样），因为它没有'不要认为你被允许有一个 <a> 包装所有这些东西。但这只是猜测。

最重要的是，有时 Froala 会给我完整的 HTML，而其他时候则不会。

我认为这没有什么区别，但我使用 React 来生成小部件，然后将生成的 HTML 注入到编辑器中。我已删除所有 data-reactid 属性以减少混乱。

原始注入的 HTML（最外面的<p> 标签在那里，因为 Froala 似乎喜欢将所有内容包装在语义块级标签中）：

<p>
  <a href="http://www.google.com" target="_blank" class="embedly-preview" title="http://www.google.com" data-source-url="http://www.google.com">
    <span class="ui media content-item-wrapper content-summary post-body">
      <span class="media-left content-summary-image post-image">
        <img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
      </span>
      <span class="media-body content-summary-body">
        <h2 class="content-summary-title content-title post-title">Google</h2>
        <p class="content-summary-content post-content">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</p>
        <p class="content-summary-link">http://www.google.com</p>
      </span>
    </span>
  </a>
</p>

Froala 给了我什么：

<p>
  <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">
    <span class="ui media content-item-wrapper content-summary post-body">
      <span class="media-left content-summary-image post-image">
        <img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com…randing%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
      </span>
      <span class="media-body content-summary-body"></span>
    </span>
  </a>
</p>
<h2 class="content-summary-title content-title post-title">
  <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Google</a>
</h2>
<p class="content-summary-content post-content">
  <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Search the world&apos;s information, including webpages, images, videos and more. Google has many special features to help you find exactly what you&apos;re looking for.</a>
</p>
<p class="content-summary-link">
  <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">http://www.google.com</a>
</p>

【问题讨论】：

标签： javascript html froala

【解决方案1】：

问题不在于编辑器，而在于您拥有的 HTML 结构。您在 P 标记内使用了 H2 标记，这是浏览器不允许的（有关更多详细信息，请参阅 https://stackoverflow.com/a/8696078/1806855）您可以在一个非常基本的 jsFiddle 中检查：https://jsfiddle.net/0jLzm2b0/。

如果您改用DIV 标签，它应该可以正常工作：https://jsfiddle.net/0jLzm2b0/1/。您可以看到输出不再更改。

【讨论】：

我最初使用 <a> 标记作为最外层的包装器并且遇到了同样的问题，但是它以不同的方式破坏了 HTML。而在 HTML5 中，<a> 标签被允许包装块级元素。所以我添加了 <p> 标签，因为 Froala 中的所有内容默认都包含在 <p> 标签中。

【解决方案2】：

在使用断点对 Froala 代码进行深入研究以隔离 HTML 被破坏的点之后，结果发现实际上是 jQuery 破坏了我的 HTML。实际上，给定变量 html 中的原始 HTML：

$(html).html() !== html

更有趣的是（从 Froala 的代码中获取相关的 sn-p，它在处理之前将获取的 HTML 包装在 div 中）：

$('<div>' + html + '</div>').html() !== $(html).html() !== html

（显然，将 html 包装在 <div> 中会使 HTML 不等于其他 HTML，但即使输出的 <div> 内的 HTML 也与原始 HTML 不同）

所以 jQuery 构造函数是“有用”的东西，它为我重新构建了 HTML。

【讨论】：