javascript：从contenteditable替换选定的文本按钮点击

我有一个与contenteditable = true的div和一个用于更改文本div选定文本onclick的按钮。javascript：从contenteditable替换选定的文本按钮点击

事业部编辑：

<div class="content" id="articleEditor" contenteditable="true"></div>

样式选项

<div class="editor-option"> 
    <button id="changeText">change</button> 
</div>

JS文件

function replaceSelectedText(replacementText){ 
    if (window.getSelection().rangeCount) { 
     range = window.getSelection().getRangeAt(0); 
     range.deleteContents(); 
     var el = document.createElement("span"); 
     el.innerHTML = replacementText; 
     var frag = document.createDocumentFragment(), node, lastNode; 
     while ((node = el.firstChild)) { 
      lastNode = frag.appendChild(node); 
     } 
     range.insertNode(document.createTextNode(replacementText)); 
    } 
} 

$('button').click(function(){ 
    replaceSelectedText('<span class="bold">'+window.getSelection().toString()+'</span>'); 
})

现在，它适用于除了最后一个字的所有文本的选择。如果我选择最后一个单词，然后点击按钮，则选择为粗体，但我后面写的所有内容都是粗体。

如何解决这个问题？

来源

2017-09-13 Amadou Beye