0

我正在使用 Froala 编辑器 v2，我遇到了一个非常令人沮丧和间歇性的问题。我正在嵌入一个自定义 HTML 小部件（用户在自己的行上输入 URL 时的丰富预览）。但是当我检索到要保存到我们数据库中的最终 HTML 时，Froala 似乎决定在给我之前“清理”我的 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>
4

2 回答 2

0

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

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

于 2016-02-08T18:19:52.113 回答
-1

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

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

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

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

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

所以 jQuery 构造函数通过为我重新构建我的 HTML 是“有用的”。

于 2016-02-08T01:46:33.083 回答