javascript - Contenteditable 要素を作成し、Enter と HTML の挿入時にその中にカーソルを置きます

Question

他のライブラリを使用せずに、純粋な JavaScriptを使用してカスタム wysiwyg をビルドします。HTMLをcontenteditableに挿入し、 Enterキーを押して改行を作成すると、1つの問題が発生しました。

contenteditable のすべての最初の子要素またはテキスト パラグラフをdiv.para. でラップする必要はありません。

  <div class="wysiwyg-content" id="post-editor" contenteditable="true">

<div class="para">My first paragraph</div>

<div class="para"><br></div>

<div class="para"><a href=""><img src=""/></a></div>

<div class="para"><figure class="gallery><a href=""><img src=""/></a></figure></div>

<div class="para">or what ever entities wrapped with div.para</div>

  </div>

また、いくつかのイベントの後に以下のコードを使用/実行します (例: 貼り付け、javascript による HTML の挿入)。作成します<div class="para">[cursor placed here]</div>。

function placeCaretAtEnd(el) {
      el.focus();
      if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
         var range = document.createRange();
         range.selectNodeContents(el);
         range.collapse(false);
         var sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
      } else if (typeof document.body.createTextRange != "undefined") {
         var textRange = document.body.createTextRange();
         textRange.moveToElementText(el);
         textRange.collapse(false);
         textRange.select();
      }
   }

// I used code below to executed AFTER insert HTML to conteneditable.
placeCaretAtEnd( document.getElementById("post-editor") );

上記の 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でそれを行う方法は? 前もって感謝します。