javascript - execCommand ('insertHTML' ) 正在占用空间

Question

在下面的代码中，我使用 execCommand('insertHTML') 突出显示了选定的文本

问题:

当我在下面选择第一个 selectme 时。它占用了 selectme 和 Test 之间的空间。但是当我选择第二个 selectme

时，没有出现同样的问题

document.addEventListener('mouseup', (event)=>{
	const selection = window.getSelection().toString();
	document.execCommand('insertHTML', false,
      `<span class="bg-red">${selection}</span>`);
});

.bg-red{
  background: red;
}

<div id="wrapper" contenteditable="true">
      selectme <span class="bg-red">TEST</span> 
      selectme <span class="bg-red">TEST</span>
</div>

浏览器:

谷歌浏览器版本 78.0.3904.97(官方构建)(64 位)

下方 5 秒 GIF

Answer 1

我用另一种方式做到了

document.getElementById("wrapper").addEventListener('mouseup', (event)=>{
            var select = window.getSelection();

            //store selected text
            var sel_txt = select.toString();

            if(sel_txt){    

                  //get ranges currently selected
                  var range = select.getRangeAt(0);
                  
                  //remove range content from the document
                  range.deleteContents();

                  //create node for replace
                  var elm = document.createElement('span');
                  elm.className = "bg-red";
                  var textNode = document.createTextNode(sel_txt);
                  elm.appendChild(textNode);
                  
                  //insert node
                  range.insertNode(elm);

                  //remove selection
                  select.removeAllRanges();
            }
    });

.bg-red{
    background: red;
}

<div id="wrapper" contenteditable="true">
      selectme <span class="bg-red">TEST</span> 
      selectme <span class="bg-red">TEST</span>
</div>