Froala v2編輯器在檢索時會破壞我的代碼

Question

我正在使用Froala編輯器v2，但遇到了一個非常令人沮喪且間歇性的問題。 我嵌入了一個自定義HTML小部件（當用戶在其自己的行中輸入URL時進行豐富的預覽）。 但是，當我檢索要保存到數據庫中的最終HTML時，Froala似乎決定在將HTML交給我之前先對其進行“清理”。 當我在編輯內容時檢查編輯器實例時，所有標記都處於良好狀態。 但是，當我調用$('.froala-editor').froalaEditor('html.get')檢索HTML時，URL預覽小部件的HTML被完全弄亂了。

我的懷疑是，由於整個預覽都包裹在<a>標記中，以使整個內容鏈接在一起（而且我在其中沒有嵌套的<a>標記，因為那是不好的HTML），因此Froala正在采用其他結構元素，例如div ， 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結構。 您已經在瀏覽器不允許的P標簽中使用了H2標簽（有關更多詳細信息，請參見https://stackoverflow.com/a/8696078/1806855 ）。您可以在非常基本的jsFiddle中進行檢查： https：// jsfiddle。凈/ 0jLzm2b0 / 。

相反，如果您使用DIV標簽代替，它應該可以正常工作： https : //jsfiddle.net/0jLzm2b0/1/ 。 您可以看到輸出不再更改。

Answer 2

在使用斷點深入研究Froala代碼以隔離HTML變形的點之后，事實證明實際上是jQuery破壞了我的HTML。 實際上，在變量html給出了上面的原始HTML：

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

更有意思的是（從Froala的代碼中提取相關片段，該片段在處理之前將獲取的HTML包裝在div ）：

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

（顯然，將html包裹在<div>將使HTML與其他HTML不相等，但是即使<div>內部的HTML也會從原始文本中被篡改）

因此，通過為我重新構建HTML，jQuery構造函數才是“有用的”東西。