Javascript 如何在contenteditable div上录制和播放编辑事件？

我试图找到一种方法来编写一些单元测试，这些单元测试可以用来编写/测试新的wysiwyg html编辑器，或者只是用于contenteditable div的默认浏览器行为

我想记录按键（可能还有其他事件，但按键是最有趣的），或者只是手动编写事件，然后在div上播放它们。最后，我将使用它来模拟小的html编辑会话，看看是否最终得到预期的序列化html

但是，我无法让以下内容调用默认浏览器行为：

$(mydiv).trigger('keydown', {type: "keydown", keyCode: 13, which: 13}); 

（实际上，它不会插入换行符或打断段落或做任何事情。）

我也尝试过这样的事情：

$(mydiv).trigger('textInput', {type: "textInput", data: 'H', target: mydiv});

（应插入字母H）

我甚至试图保留原始事件对象，然后像这样触发它们：

$(mydiv).trigger(eventObject);

（其中eventObject是我之前获得并保留的实际关键事件）

部分问题是我不知道我必须保留的最小事件对象属性是什么，然后再发送回来。（所有这些都不是选项，因为由于所有循环引用，您不能将整个事件作为JSON转储。）

问题的另一部分是我甚至不知道如何正确地聚焦可编辑图像

至少我需要创建一个新的空div，设置CordNeNeIDelie=“true”，然后“插入一些文本”，将光标放在中间，并通过读取和重放来自编辑事件日志的命令来“按Enter”。

---

以下是我需要它的原因：

我们的想法是编写许多可以在任何尖端浏览器中运行的小测试（我只对最新版本的Chrome、Firefox、Opera和IE9感兴趣），看看它们与预期的不同之处。这是为了调查最新的浏览器做了什么，而不是10年前的浏览器做了什么

然后我可以列出一些浏览器之间的差异清单。然后，任何想要编写新的wysiwyg编辑器的人都可以使用它，但理想情况下，它的“核心”部分——不包含或不关心任何界面/浏览器的部分——可以编写一次并由所有人共享

单个编辑器处理诸如插入/删除内联元素、链接文本、插入/编辑图像、插入列表和表格、将p更改为h1等操作。我只对这里的按键级编辑感兴趣

---

其中一些测试也可以类似于javascript框架执行“功能检测”的方式来查看哪些行为必须被拦截/修补，以便enter和backspace的行为始终相同，从而使光标始终位于b标记的正确一侧，依此类推。

您将无法在此处执行您想要的操作，我不这么认为。大多数浏览器不允许脚本完全模拟按键：您可以触发事件，但关联的浏览器行为（更新输入值、编辑contenteditable元素的内容、移动插入符号等）不会发生

---

关于在当前浏览器中记录contenteditable，WHATWG正在努力围绕contenteditable指定各种API。目前正在进行的工作是（WHATWG邮件列表上有各种关于这一点的线索，请查看档案）。在此之前是。还有一项正在进行的工作，现在还包括

选择

。有关contenteditable元素中的Enter键行为，请参见。

我刚刚注意到Aloha Editor已经执行了类似的操作：所以这一定是可能的。他们使用jquery.simulate，这看起来像是jquery ui项目使用的。这有点相切，但我也不认为我会使用execCommand——它本身有很多问题，最终你会想做一些它没有涵盖的事情，这时你必须手动处理html，然后撤销/重做停止工作…@Le Roux Bodenstein:注意

pressiner（）

函数中的注释：“//最后，我们需要更新aloha选择（通常是自动完成的）”。在我看来，aloha编辑器仍在拦截Enter键，该函数将只测试它们自己的事件处理，而不是浏览器自己的Enter键处理。@Le Roux Bodenstein:同意

execCommand（）

，它的用处目前相当有限。@Tim Down我在这里的参考资料实际上是Aloha Editor。它的工作原理几乎与我想要的完全一样，只是我不喜欢他们的用户界面，事实上，对于这个项目，我根本不想要任何用户界面-这应该只是在所有已经几乎完全开放的浏览器之间建立一个公平的竞争环境做正确的事情，然后提供一些API（主要用于替换execCommand和handle undo/redo等），这样就可以轻松地在上面构建一个界面。WYSIWYG编辑器核心可以最小限度地处理所有不可见的基础。