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

Question

我正在尝试制作类似这样的简单文本编辑器：
contenteditable text editor.
我正在使用 AngularJS v1.1.4，它在 Firefox 最新版本上运行良好，但在 chrome 最新版本上，按钮不起作用。这是plunker example。

更新：

问题比我想象的要复杂。

火狐：

带有 contenteditable div 的文本编辑器示例的工作方式如下：
当我单击带有选定文本的粗体按钮时，文本变为粗体，但光标或插入符号（使用键盘键入时移动的那个东西）并不总是可见。
但是当使用 iframe 方法时，iframe 是不可点击的。

铬：

带有 contenteditable div 的文本编辑器示例的工作方式如下：
当我单击带有选定文本的粗体按钮时，什么也没有发生，但是当我通过控制台调用命令时它可以工作（奇怪）。
iframe 方法在这里工作正常。

查看示例：

• Editor with contenteditable
• Editor with iframe

任何帮助，在此先感谢。

Answer 1

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

由于一个非常简单的原因，它不适用于非帧模式下的ng-click。当您单击按钮格式化文本时，焦点从可编辑区域丢失，并且在执行命令时没有选择文本。但是 mousedown 事件发生在焦点丢失之前，因此您最终会失去焦点并从编辑器中选择，但命令执行发生在焦点丢失之前。