即使单击另一个div，也可以在编辑模式下保持满足感

Question

我最近在Mozilla developer network找到了一个简单的富文本编辑器，它有一个带图像工具栏的可编辑div（对于 Bold 等选项），这里是{{{}的完整实现3}}

它有图像工具栏来更改可编辑div中的文本但是当我用div或span或li等替换图像时，onclick函数是{ {1}}不起作用！即 它仅在我用formatDoc('bold')或img替换div或span时才有效。

以下是我的代码code，其中显示了button和div代码，只有onglick img正在运行。

当我在所选文本上运行img而没有将焦点放在单击的div上时，有没有办法在编辑模式下保留contenteditable div？

Answer 1

显然它确实会因某种原因影响DIV。虽然我没有为他们找到解决方法 - 您可以使用普通按钮获得类似的效果：

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

您可以根据需要设置按钮的样式（例如，删除标准按钮外观）：

.hi{
  cursor:pointer;
  border: none;
  background: inherit
}

.hi:focus {
  outline:none
}

演示： http://jsbin.com/IDIJoCU/1/edit

Answer 2

最简单的解决方案是改为使用mousedown事件并阻止事件的默认操作。

演示：http://jsbin.com/IZOzAKim/1/edit