javascript：单击按钮时从 contenteditable 替换选定的文本答案

【问题标题】：javascript: replace selected text from contenteditable on button clickjavascript：单击按钮时从 contenteditable 替换选定的文本
【发布时间】：2018-02-21 14:43:58
【问题描述】：

我有一个 contenteditable=true 的 div 和一个用于更改文本 div 选定文本 onclick 的按钮。

Div 可编辑：

<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>');
})

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

如何解决这个问题？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可能想看看这个：How to set caret(cursor) position in contenteditable element (div)?

我会尝试在替换文本中添加一个空格字符，然后在该空格末尾设置光标。

（另外：请注意代码中的拼写错误，按钮单击功能中没有关闭单引号。）

【讨论】：