32

私は自分のリッチテキスト/wysiwygエディターを作成する際に<div>vsを使用することの長所と短所を比較検討しようとしています。<iframe>

そうすることで、なぜ私はcontenteditable <div>を使用できないのですか、そしてなぜそんなに多くの人々が<iframe>？

背景の説明：私が理解しているようにwysiwygエディターを作成する一般的な方法は、divまたはiframeをコンテンツ編集可能にしてから、 divexecCommandまたはiframe本体を含むドキュメントでテキストを太字にすることです。

HTMLは次のとおりです。

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
       <div contenteditable="true"></div>
  </body>
</html>

対：

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
    <iframe>
       <body contenteditable="true"></body>
    </iframe>
  </body>
</html>

とJS：

$(document.body).on('click', '.btn-bold', function(){
     document.execCommand('bold', false, null); 
});

対：

$(document.body).on('click', '.btn-bold', function(){
     window.frames[0].document.body.execCommand('bold', false, null); 
});

ほとんどのよくできたリッチテキストエディタはiframeを使用しているようです。このcontenteditable /execCommandコンボをWebkitブラウザーのdiv/iframeで簡単に機能させることができますが、Firefoxでiframeを機能させるのに苦労しています。スクリプトとスタイルシートをiframeにロードすることに頼らなければならず、divベースのバージョンで簡単に達成できることを複製するためにあらゆる種類のナンセンスがあります。したがって、<div>ベースの方法が望ましいようです。私が再考する強い理由はありますか？

4

2 に答える 2

31

まず第一に...商用利用を考えているのであれば、独自のWYSIWYGエディターを作成しようとしないでください。多くのことを学ぶことができるので、個人的なプロジェクトにとってはクールなアイデアですが、見た目だけでなく、実際に機能するかどうかを気にする人に販売できるエディターを作成するには、何年もかかります。最近、見栄えのする新しいエディターをいくつか見ましたが、実際には機能しません。本当に。そして、それは彼らの開発者がひどいからではありません-それはブラウザがひどいからです。

OK、それは素晴らしいイントロでした、今いくつかの事実：

  1. 私はCKEditorの開発者の一人です。
  2. それは約10年間開発されました。
  3. Tracにはまだ約1,000のアクティブな問題があります。
  4. 私たちはウェブ開発に夢中になりません：P。

答えは、Tim Downがここに書いたwysiwygエディターの作成に加えて、この質問の下で書いたものを読むことができますHTML WYSIWYG edtor：編集可能なコンテンツがiFrameで移動されるのはなぜですか

基本的に、より安全なiframeでは、ドキュメント全体が取得され、編集可能な要素からコンテンツが漏れることはなく、スタイルを使用できます。iframeアプローチには、より重いブートストラップコードという欠点もいくつかあります。本当にトリッキーです。エディターが接続されているWebサイトのスタイルを継承することはできません。この場合、フォーカスの管理がより困難になる可能性があり、新しい要素を作成するドキュメントに注意を払う必要があります（ IE <8にのみ関連します）。

そして覚えておいてください-このような問題に備えていない限り、独自のエディタを作成しないでくださいプレーンテキストとして貼り付けContenteditable div＆textarea（word / excel ...）：D

于 2012-07-13T23:03:02.230 に答える
19

の理由iframe

長所

  1. CSSの分離
  2. セキュリティの分離（この点について詳しく説明することはできません。読んだ内容を繰り返します）

短所

  1. より重い（ただし、重要な/目立つポイントにはなりません）
  2. JavaScriptからアクセスするのがより困難です。

個人的に、私は自分のエディターを開発し、それをに入れることにしましたiframe。

于 2012-07-12T11:36:26.643 に答える