WYSIWYG エディターとして機(jī)能する div があります。これはテキスト ボックスとして機(jī)能しますが、その中に Markdown 構(gòu)文をレンダリングしてライブ変更を表示します。
問題: 文字を入力すると、キャレットの位置が div の先頭にリセットされます。
コードペン：https://codepen.io/ADAMJR/pen/MWvPebK
QuillJS のような Markdown エディターは、親要素を編集せずに子要素を編集できるようです。これにより問題は回避されますが、この設(shè)定でそのロジックを再作成する方法はわかりました。
質(zhì)問: 入力時(shí)にキャレットの位置がリセットされないようにするにはどうすればよいですか?
更新: 各入力でキャレットの位置を div の末尾に送信することができました。ただし、これでも基本的に位置はリセットされます。 https://codepen.io/ADAMJR/pen/KKvGNbY
2
0
0
ほとんどのリッチ テキスト エディターが行うことは、獨(dú)自の內(nèi)部狀態(tài)を保持し、主要なイベントでそれを更新し、カスタム ビジュアル レイヤーをレンダリングすることです。例えば： ＃＃＃
最初にカーソル位置を取得してから、內(nèi)容を処理して設(shè)定する必要があります。その後、カーソル位置を元に戻します。
ネストされた要素がある場合、カーソル位置の復(fù)元は注意が必要な部分です。さらに、毎回新しい 要素と 要素を作成し、古い要素は破棄されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
