javascript - 简单的文本编辑器在 chrome 中具有可编辑的奇怪行为

Question

我正在尝试制作类似这个简单的文本编辑器的东西:
contenteditable text editor .
我正在使用 AngularJS v1.1.4，它在 firefox lates 上运行良好，但在 chrome latest 上按钮不起作用。这是一个plunker example .

更新:

问题比我想象的要复杂。

火狐:

带有 contenteditable div 的文本编辑器的例子是这样工作的:
当我单击选中文本的粗体按钮时，文本变为粗体，但光标或插入符号(当您使用键盘键入时移动的东西)并不总是可见。
但是当使用 iframe 方法时，iframe 是不可点击的。

Chrome :

带有 contenteditable div 的文本编辑器的例子是这样工作的:
当我单击选中文本的粗体按钮时，什么也没有发生，但是当我通过控制台调用命令时，它起作用了(很奇怪)。
iframe 方法在这里工作正常。

查看示例:

• > Editor with contenteditable
• > Editor with iframe

任何帮助，在此先感谢。

Answer 1

要在 Chrome 中工作，您必须使用 ng-mousedown 而不是 ng-click。

出于非常简单的原因，它在非框架模式下不适用于 ng-click。当您单击按钮来设置文本格式时，焦点会从可编辑区域丢失，并且在执行命令时不会选择任何文本。但是 mousedown 事件发生在失去焦点之前，因此您最终从编辑器中失去了焦点和选择，但命令执行发生在失去焦点之前。