Question

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

我怀疑是这样的，因为整个预览都包含在<a>代码中，以便将整个内容链接起来（并且我没有任何嵌套的<a>代码，因为＆＃ 39;糟糕的HTML），Froala正在使用其他结构元素，如div s，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>

Answer 1

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

相反，如果您使用P标记代替https://jsfiddle.net/0jLzm2b0/1/，它应该可以正常工作。您可以看到输出不再更改。

Answer 2

在使用断点挖掘Froala代码以隔离HTML被破坏的点之后，事实证明它实际上是jQuery，这会破坏我的HTML。实际上，给定变量html中的原始HTML：

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

更有趣的是（从Froala的代码中获取相关片段，在处理之前将其包装在div中）：

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

（显然，将html包裹在<div>中会使HTML与其他HTML不相等，但即使输出的<div>内的HTML也会从原始版本中删除<） / p>

因此，通过为我重新配置HTML，jQuery构造函数是“有用的”。

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

2 个答案: