Javascript富文本编辑器，单击按钮后contenteditable区域失去焦点

我有一个简单的javascript富文本编辑器，只包含一个粗体按钮，该按钮具有以下onclick：

  document.execCommand('bold', false)

和简单的html

<div contenteditable="true">

---

我的问题是，当我单击粗体按钮时，文本区域失去了焦点，有什么解决方案吗？

答案更新

查看一下，您可以保存和恢复当前contenteditable位置，将模糊事件侦听器添加到contenteditable中

例如：

//
//单击后恢复位置
//
document.getElementById（'btn'）。addEventListener（'click'，函数（e）{
恢复性选择（cpos）；
})
//
//在模糊上保存位置
//
document.querySelector（'div[contenteditable=“true”]”）。addEventListener（'blur'，函数（e）{
cpos=saveSelection（）；
})
函数saveSelection（）{
if（window.getSelection）{
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
返回sel.getRangeAt（0）；
}
}else if（document.selection&&document.selection.createRange）{
return document.selection.createRange（）；
}
返回null；
}
功能恢复选择（范围）{
如果（范围）{
if（window.getSelection）{
sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（document.selection&&range.select）{
range.select（）；
}
}
}
var-cpos=-1
加粗
这是文本
焦点会移动到按钮，因此您需要取消单击操作，这样焦点不会在内容可编辑元素中丢失


document.querySelector（“.actions”）.addEventListener（“mousedown”，函数（e）{
var action=e.target.dataset.action；
如果（行动）{
document.execCommand（操作，false）
//防止按钮真正聚焦
e、 预防默认值（）；
}
})
[内容可编辑]{
宽度：300px；
高度：300px；
边框：1px纯黑；
}

大胆的
斜体
这是因为焦点移到了按钮上。。。。取消操作。如果你显示了你的点击事件，我可以向你展示一个解决方案。该方案聚焦于elemet，但它会将光标的位置更改为不同的位置…@azurinko Answer updated。现在应该可以了。让我知道是的，但如果你可以取消活动，那就有点过分了。但是，当他们没有点击按钮就模糊时，这可能也很奇怪。为什么是向下投票？请至少留下评论。谢谢实际上我可以利用这一点，但这不是问题的答案，谢谢。文本区域仍然失去了焦点。哈哈，为什么对一个有效的答案投反对票？这是OP想要的，与其他OP不同answer@Neal，嗯，我在chrome上测试的时候没有。如果你愿意，我可以录下来？；-）我也在chrome上（在mac上）。