替換contenteditable元素中的文本時如何將插入符號保持在當前位置

Question

我有一個<span contenteditable="true"> 。 當我在列表或表格后移到新行時，我得到

<div><br></div>

所以要獲得新的段落，我將div替換為

myContentEditableElement.addEventListener('keyup', function(){
    if(this.innerHTML.indexOf('<div><br></div>') != -1) {
        this.innerHTML = this.innerHTML.replace(/<div><br><\/div>/g,'<p><br></p>');
    }
});

現在，插入符號移動到我的contenteditable元素的開頭。 但是我需要它保留在當前位置，即在新段落的內部。

我試過了

var range = document.createRange();
range.selectNodeContents(this);
var selection = window.getSelection();
range.setStart(selection.anchorNode, selection.anchorOffset);
selection.removeAllRanges();
selection.addRange(range);

但這沒有幫助

Answer 1

我自己找到了答案：

if(~this.innerHTML.indexOf('<div><br></div>')) {
    var newLine = document.createElement('p');
    newLine.innerHTML = '<br>';
    var selection = window.getSelection();
    var newDivNode = selection.anchorNode;
    this.insertBefore(newLine, newDivNode);
    this.removeChild(newDivNode);
    var range = document.createRange();
    range.setStart(newLine, 0);
    range.setStart(newLine, 0);
    selection.removeAllRanges();
    selection.addRange(range);
}