各ユーザーが異なる色で入力したときに、etherpad UI 効果を実現したいと考えています。リッチ テキスト エディターとして contenteditable div を使用します。
私がこれまでに試したこと：
1) 入力の変更時に、元のテキストと変更されたテキストの差分を作成します (たとえば、diff-match-patch を使用)。
2) 差分部分文字列の境界を見て、それがユーザーのテキスト内にあるかどうかを確認します (いくつかのタグで定義されています)。
3) true の場合、何もしません。false の場合、その部分文字列の横に 2 つのカラー タグを挿入し、変更呼び出しを適用します。$(element).html(new_text)
大きな問題があります - を呼び出すとhtml()、キャレットの位置がゼロにリセットされます。これは、テキスト エディターで作業しているときにちょっと悪いことです。contenteditable div からキャレット位置を抽出し、オフセットで再度設定しようとしdiff.lengthましたが、div 内に多くの子ノードがあり、キャレット オフセットが親に対して相対的であるため、これもうまくいきません。
アップデート：
したがって、問題を少し絞り込むことができます。
1) TextNode 要素内でキャレットの位置を取得する方法を知っています
2）TextNode要素内で設定する方法を知っています（Rangyの有無にかかわらず）
3) 唯一の問題は、現在キャレットがどの要素にあるのかを調べる方法です。