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