在contentEditable div中选择粗体文本，使用纯JavaScript而不使用jQuery之类的库

我们有一个可编辑的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);
    }

---

您可以通过收听您的

contentEditable

的

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

---

为按钮使用按钮和div，以便您可以看到差异。

使用

鼠标向下

事件而不是

单击事件，或者将
按钮设置为不可选择

有关详细信息，请参阅。
可能需要侦听器将创建的范围存储在模糊上。至少我是这么想的。这里似乎正在发生一些事情。所有包含的代码都会提醒突出显示的文本，这是按照预期的方式工作的。您不能只使用实际的粗体按钮而不是div按钮吗？选择将保留。@Samurai一个实际的按钮将完成我的工作，但我只能使用div。对不起，如果在单击按钮（或div）时保留所选文本，您的JSFIDLE bold按钮在JSFIDLE中不起任何作用。问题是当点击按钮时，所选文本被取消选择（文本失去焦点）。感谢您的澄清，在这种情况下它确实有效，这是另一种方式：顺便说一下，这个答案不完整。你应该把按钮修好。