javascript - contentEditable div 中的粗体选定文本，使用纯 JavaScript，无需 jQuery 等库

Question

我们有一个可编辑的 div，我们希望在单击按钮时更改用户选择的文本样式；就像这个编辑器的粗体或斜体按钮一样。

但是当我们点击按钮时，我们选择的文本会被取消选择。

因此，即使可编辑的焦点关闭并更改样式，如何保持我们选定的文本突出显示。

我的代码：

可编辑的分区：

var textbox= document.createElement("div");
textbox.setAttribute("contenteditable", "true");

按钮 ：

var bold = document.createElement("div");
bold.innerHTML = "B";

按钮点击：

bold.addEventListener("click", function(){
        getSelectedText();
},false);

    function getSelectedText()
    {
       var html = "";
       if (window.getSelection) {
         html = window.getSelection().toString();
       } 

       else if (document.selection && document.selection.type != "Control") {
            html = document.selection.createRange().text;
       }
       alert(html);
    }

Answer 1

您可以通过收听您contentEditable的 's来获得选择onmouseup并将其存储在变量中。单击 div 后，将选择恢复为原来的状态：

Javascript：

var range = "";

function getSelected() {
    var selection = window.getSelection()
    range = selection.getRangeAt(0);
}

function reselect() {
    var selection = window.getSelection();  
    selection.removeAllRanges();
    selection.addRange(range);
}

jsfiddle DEMO
使用一个按钮和一个 div 作为按钮，因此您可以看到区别。

Answer 2

要么使用mousedown事件而不是click事件，要么将<div>按钮设置为不可选择。

有关详细信息，请参阅此答案。