Javascriptのワードプロセッサ/エディタ（または、Google Docs architecture）

純粋に好奇心のために私自身のテキストエディタを転載するのは面白いと思っていました（ホイールの改革には関係ありません）。私は、DocsやZoho Writerのようなアプリケーションが、別のページにテキストを分けるような高度なレイアウトを得ることができるかどうか、あるいはTinyMCEやniceditのようなものを編集することはできません。私は、designModeとcontenteditableを使用していることを認識しています。私はキャンバスを使用している人のことを聞いてきましたが、より良い方法がありますか？ MSやLibreOfficeのようなデスクトップオフィススイートはどのように管理していますか？ 特に、編集中のコンテンツを別々のページに分割していますか？Javascriptのワードプロセッサ/エディタ（または、Google Docs architecture）

新しいGoogleドキュメントの仕組みを知っている人は誰でも気付くでしょうか？ contenteditable（ZohoはdesignModeを使用しています）やキャンバスを使用していないようです。私が見つけたものから、それは<div>の非常に深い階層です。

出典

2012-01-06 Art

（代わりに、コンテンツが編集可能な体の）入力フィールドで私は驚かないだろう。それは、私は私を裏切ることはないと推測しており、私はそれを調べるには怠惰だと言いました。 –

Googleは、すべてのアニメーションや編集者を作るためにタグを入れ子にする独創的な方法で私を驚かせることは決してありません。 –

Tikkon、私はそれを考えました。すべての英数字キーとモディファイアをキャプチャするのに苦労しているようです。それが何らかのパフォーマンス上のペナルティを被るかどうか疑問に思います。副作用として、DOMをクロールした後、Docsのキャレットが実際に点滅するDOM要素であると思われます。誰か吹っ飛んだ、誰？ – Art

あなたの「質問」は少し広いですが、私は少しあなたを助けるためにしようとします：

Googleドキュメントが隠さiframe（ないdisplay:noneを使用している、ユーザーが実際に見ることができないだけということですそれは編集可能なコンテンツを持つ本文付きです（.docs-texteventtarget-iframe）。キャレットが点滅していると、編集可能なボディがフォーカスされていることを意味し、そこに書き込むすべてのものがDOMに挿入されます（特殊なHTML文字のサニタイズ後）

Google Docsは、 svg）;キャレットが少しでもdiv点滅しています。

TinyMCEのは、同様の手法を使用していますが、彼らはJavaScriptを使用して、キーボード/マウス入力をキャッチし、必要に応じてDOMを変更した場合

出典

2012-01-06 03:42:23

ポイント獲得 - 質問を明確にしました。それは非常にエレガントな解決策です - 私はkeypressesがキャプチャされ、有限状態マシンに基づいて、フォーマットの適用や文字の挿入などのアクションが取られると思いますか？ – Art

イベントは実際には技術的な意味ではキャプチャされず、すべてがボディ（またはTinyMCEの入力）に書き込まれ、キャラクタが「ドキュメント」にコピーされてボディ/入力がクリアされた直後にイベントがキャプチャされます。これは、イベントをキャプチャするとキーコード（異なるブラウザ/設定）の解釈が矛盾するためです。 –

イベントがそのようにキャプチャされていない場合、なぜボディ自体を編集しないのですか？ – Art

Javascriptのワードプロセッサ/エディタ（または、Google Docs architecture）

答えて

関連する問題