与contenteditable相关的用户事件

Question

^{我是JavaScript和HTML5的初学者}

假设我的HTML5窗口中有一个可编辑的<div>[块级]元素。

用户如何通过交互修改该元素（或某些子元素）以触发JavaScript事件，列出详尽的JavaScript事件列表？

我应该如何在JavaScript中编写代码来拒绝某些用户操作？或更改DOM…（即替换某个TextNode为例如某个<span>）

似乎事件无法“撤消”或“拒绝”某些用户操作...

顺便说一句，此时我只关心最近的Firefox浏览器（我的Linux上是21 beta 7）。

这是一个相关问题的答案。

换句话说，我不清楚如何设计HTML5和JavaScript富文本编辑器。

^{PS我想使用纯JavaScript，暂不考虑超出此范围的任何库。}

补充

也许变异观察器可能与此相关？

跟进问题在这里...

- Basile Starynkevitch

---

如果您想拒绝某些用户操作，解决方案是监听低级别的键盘/鼠标事件，并在即将发生不希望的事情时取消它们（在您链接的答案中有所提示）。至于事件的详尽列表，基本上只会是通常的事件，与contenteditable/designmode无关，除了新的“input”事件。 - Dagg Nabbit

Answer 1

内容可编辑元素的事件列表与type=text输入框相同。请参阅所有事件的列表（特别是表单事件）：http://www.w3schools.com/tags/ref_eventattributes.asp

“我该如何在Javascript中编写以拒绝某些用户操作？”只需在该操作的事件侦听器开头放置“event.preventDefault()”。例如，拒绝按键：

contenteditableElement.addEventListener('keypress', function (e) {
    e.preventDefault();
    // do something else, maybe...
});

撤销用户的操作：

document.execCommand('undo', false, '');

关于设计富文本编辑器，有许多好的演示可供使用。我推荐以下网址： https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla http://www.quirksmode.org/dom/execCommand/ 请确保查看最后一个链接的源代码，特别是buttons.js文件。还要查看MDN文章中的惊人命令列表。祝你好运，但尽量不要重复造轮子。有许多经过充分测试的编辑器可供选择，请查看此列表：http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

- rvighne