web-dev-qa-db-ja.com

リッチテキスト/ wysiwygエディターの作成におけるコンテンツ編集可能なdivとiframe

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

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

背景のディスカッション：私が理解しているようにwysiwygエディターを作成する一般的な方法は、divまたはiframe contenteditableを作成し、divまたはを含むドキュメントでexecCommandを実行することですテキストを太字にするなどの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>ベースの方法が望ましいようです。私が再考する強力な理由はありますか？

javascriptjquerywysiwygcontenteditableexeccommand
28
tim peterson

iframeの理由

長所

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

短所

  1. より重い（ただし、重要な点/顕著な点ではない）
  2. JavaScriptからアクセスするのがより困難です。

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

17
Benibur

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

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

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

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

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

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

29
Reinmar