Question

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

Div editable：

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

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

如何解决这个问题？

Answer 1

您可能需要查看此内容：How to set caret(cursor) position in contenteditable element (div)?

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

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

javascript：在按钮点击上替换contenteditable中的所选文本

1 个答案: