24

Webベースのリッチテキストエディタを実装するときdocument.execCommand、HTMLドキュメントで操作を実行するのに役立つことを読みました（選択範囲を太字にするなど）。ただし、もう少し良いものが必要です。具体的には、innerHTMLに追加または削除されるテキストと、その場所（ドキュメント全体のHTML表現へのオフセットとして）を正確に知る必要があります。

組み込みのdocument.execCommandをDOM4のミューテーションオブザーバーと一緒に使用することを検討しましたが、execCommandはそのタスクに対応していないようです。

  • 選択範囲を「太字から外す」方法がわかりません
  • 生成されるhtmlはブラウザごとに異なるようです。（<b>ではなく<span>タグが欲しいのですが、一貫性がより重要です）
  • また、冗長にネストされた/隣接する<span>タグを処理するための情報はありません。

また、ミューテーションオブザーバーを使用することは、私のニーズに基づいて少しやり過ぎのようです。

私の動機：ドキュメント全体を再送信せずに、ドキュメントの変更をサーバーに定期的に送信しようとしています。HTML表現での挿入と削除のコレクションとしてデータを送信しています。誰かがこの機能をCKEditorなどから引き出す方法を知っているなら（私は最初から始める必要はありません）、私はあなたを永遠に愛しています。

注：非常に大きなドキュメントではパフォーマンスが低いため、テキスト差分を実行することはできません。

そうでなければ、私はこれを行う何かを書こうとすることを正確に恐れていません。DOMの範囲オブジェクトによって提供されるメソッドは、多くの手間のかかる作業を処理します。この可能性についてもアドバイスをいただければ幸いです。

4

3 に答える 3

13

execCommand を使用する代わりの方法が 1 つあります。カーソルの点滅を含むエディターの対話全体を実装することです。そして、それは行われました。Google はドキュメントでそれを行っていますが、無料でオープンソースのものもあります。Cloud9 IDE http://c9.ioには実装があります。私の知る限り、githubはしばらくの間そのエディターを使用しています。execCommand のように、ネイティブ コードが含まれていないため、その下で確実に何でも実行できます。

レポはこちら: https://github.com/ajaxorg/cloud9 (これには IDE 全体が含まれているため、エディターのコードを見つける必要があります。)

また、dom ミューテーション イベントは非推奨です。古いブラウザーのサポートを取りやめることができる場合は、 Mutation Observer を試してください。そうでない場合は、DOM の変更をまったく検出しないようにして、エディターの実装の変更をインターセプトしてください。これは、新しいブラウザーにも適している可能性があります。

于 2012-09-16T21:17:18.790 に答える