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 が壊れるポイントを特定したところ、HTML を壊しているのは実際には jQuery であることがわかりました。事実上、上記の元の HTML を変数に指定すると、次のようになりますhtml。

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

さらに興味深いのは次のことです (Froala のコードから関連するスニペットを取り出し、フェッチした HTML をdiv処理前にラップします):

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

html(明らかに、aでラップ<div>すると、HTML は他の HTML と等しく<div>なくなりますが、出力される 内の HTML でさえ、元の HTML から壊れています)

したがって、jQuery コンストラクターは、HTML を再構築することによって「役立つ」ものです。

于 2016-02-08T01:46:33.083 に答える