問題タブ [content-editor]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Contenteditable 要素を作成し、Enter と HTML の挿入時にその中にカーソルを置きます
他のライブラリを使用せずに、純粋な JavaScriptを使用してカスタム wysiwyg をビルドします。HTMLをcontenteditableに挿入し、 Enterキーを押して改行を作成すると、1つの問題が発生しました。
contenteditable のすべての最初の子要素またはテキスト パラグラフをdiv.para
. でラップする必要はありません。
また、いくつかのイベントの後に以下のコードを使用/実行します (例: 貼り付け、javascript による HTML の挿入)。作成します<div class="para">[cursor placed here]</div>
。
上記の JavaScript では目標を達成するには不十分だと思います。なぜなら、javascript を介して HTML を contenteditable に挿入した後、Enter キーを押します (カーソルが contenteditable の最後を見てください); create 要素になり、要素 INSIDE の最後のタグに従いますdiv.para
。例: html を挿入<div class="para"><figure class="gallery><a href=""><img src=""/></a></figure></div>
し、Enter キーを押すと になり<div class="para"><figure class="gallery><br>[possible cursor here]</div>
ます。毎回ヒットしたくないのは、 contenteditable create new element を入力すること<div class="para">[then cursor placed here]</div>
です。
Pure Javascriptでそれを行う方法は? 前もって感謝します。