選択と範囲オブジェクトを使用するJavaScriptマークアップエディタ

Question

選択と範囲オブジェクトを使用してJavaScriptベースのマークアップエディタ（WYSIWIG）を作成しようとしています。私はこれらのオブジェクトにアクセスするためのこれまでのところ問題はありません。

私の問題はここに始まる：

を範囲オブジェクトを使用して、私はその性質startContainer/StartOffsetとEndContainer/endOffsetのにアクセスすることができます。つまり、私の選択が始まるノードに関する情報を、内部の位置と選択の終了に関する同じ情報を含めて返すことを意味します。

私が理解している限り、JavaScriptで自動的に開始タグまたは終了タグが追加され、選択したものが既存のツリー構造を破壊します。

ここでマークアップを追加したい場合、どのようにこれらの壊れた構造に対処できますか？

例：

This <i>is my</i><b>sample</b> text. 

今、私は「私のサンプルを」部分を強調したいと思います

これは「私のサンプル」の選択から構築する必要があるようなものを意味します

This <i>is <u>my</u></i><b><u>sample</u></b> text. 

しかし、私は既存のツリー構造の破損に気付かないので、どうすればいいですか？有効なマークアップを確認するにはどうすればよいですか？

文字列全体の処理についても考えていましたが、文字/テキストのグローバルな位置はわかりませんが、特定のノード内の位置についてはわかりません。

私はこの質問がはっきりしていることを願っており、その一般的な形式についてお詫び申し上げます。しかし、私は実際にこのようなことに夢中になっています...

Answer 1

document.execCommand()（MSDN、MDN）の組み込みメソッドがあります。ほとんどのブラウザで（contenteditableまたはdesignModeを使用して）編集可能なコンテンツでのみ動作することをhttp://jsfiddle.net/3NcEP/

注：下線の場合は、

document.execCommand("Underline", false, null); 

jsFiddleだろう。

組み込みコマンドのいずれかで提供されていない選択肢にスタイルを適用する必要がある場合は、選択範囲内のすべてのノードを自分で処理し、必要に応じて選択。これは自明ではありません。また、IE < 9はDOM RangeとSelectionをサポートしておらず、まったく別のことをしています。これらのブラウザを処理する必要がある場合は、私自身のRangyのようなライブラリが役に立ちます。