内部 HTML が変更されたときに HTML コンテンツ編集可能なキャレット位置を保持する

Question

WYSIWYG エディターとして機能する div があります。これはテキスト ボックスとして機能しますが、その中に Markdown 構文をレンダリングしてライブ変更を表示します。

問題: 文字を入力すると、キャレットの位置が div の先頭にリセットされます。

リーリー リーリー リーリー

コードペン：https://codepen.io/ADAMJR/pen/MWvPebK

QuillJS のような Markdown エディターは、親要素を編集せずに子要素を編集できるようです。これにより問題は回避されますが、この設定でそのロジックを再作成する方法はわかりました。

質問: 入力時にキャレットの位置がリセットされないようにするにはどうすればよいですか?

更新: 各入力でキャレットの位置を div の末尾に送信することができました。ただし、これでも基本的に位置はリセットされます。 https://codepen.io/ADAMJR/pen/KKvGNbY

Answer 1

ほとんどのリッチ テキスト エディターが行うことは、独自の内部状態を保持し、主要なイベントでそれを更新し、カスタム ビジュアル レイヤーをレンダリングすることです。例えば： ＃＃＃

リーリー リーリー リーリー

Answer 2

最初にカーソル位置を取得してから、内容を処理して設定する必要があります。その後、カーソル位置を元に戻します。

ネストされた要素がある場合、カーソル位置の復元は注意が必要な部分です。さらに、毎回新しい 要素と 要素を作成し、古い要素は破棄されます。

リーリー リーリー リーリー