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

Question

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

更新：

问题比我想象的要复杂。

火狐：

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

铬合金：

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

查看示例：

• 具有 contenteditable 的编辑器
• 带有 iframe 的编辑器

任何帮助，在此先感谢。

Answer 1

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

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