Javascript 在编辑模式下保留contenteditable，即使在单击另一个div时也是如此

我最近在Mozilla开发者网络上发现了一个简单的富文本编辑器，它有一个带图像工具栏的可编辑div（用于Bold等选项），下面是它的完整实现

它有图像工具栏来更改可编辑div中的文本，但是当我用

div

或

span

或

li

等替换图像时，

onclick

函数

formatDoc（'bold'）

不起作用！也就是说 仅当我用

img

或

按钮替换div或span时，它才起作用

这是我的代码，显示了
div
和
img
标记，只有一次img可以工作

当我在所选文本上运行
formatDoc（'bold'）
时，有没有办法在编辑模式下保留contenteditable div，而不是将焦点放在单击的div上？
显然，它确实会因某种原因影响div。虽然我没有找到解决方法，但您可以使用普通按钮获得类似效果：

<button class="hi" onclick="formatDoc('bold');"> bold </button>

演示：
最简单的解决方案是使用
mousedown
事件，并阻止事件的默认操作

演示：
由于某种原因，单击事件将焦点从可编辑的div上移开。这很奇怪是的，这正是这里的问题所在。@Deryck你能告诉我如何解决它吗？太棒了！！非常感谢，但是您能让我理解为什么我应该使用onmousediwn事件吗？？？@Null：一旦触发
click
事件，焦点已经移动到文档正文，contenteditable元素中的选择将丢失
mousedown
在焦点丢失之前触发，防止与事件关联的默认操作（
onmousedown
属性值中的
return false
）防止焦点更改。
.hi{
  cursor:pointer;
  border: none;
  background: inherit
}

.hi:focus {
  outline:none
}