javascript - 与 contenteditable 相关的用户事件

Question

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

假设我有一个 contenteditable <div>我的 HTML5 窗口中的 [ block 级] 元素。

用户可以通过用户交互修改此元素(或某些子元素)来触发的 JavaScript 事件的详尽列表是什么？

我应该如何用 JavaScript 编写代码来拒绝某些用户操作？或更改 DOM...(即用例如一些 <span> 替换一些 TextNode)

似乎 input事件不能“撤消”或“拒绝”某些用户操作...

FWIW，目前我只关心最新的 Firefox 浏览器(我的是 Linux 上的 21 beta 7)。

This is an answer一个相关的问题。

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

^{PS 我想要纯 JavaScript，对它上面的任何库都不感兴趣。}

附录

也许 mutation observers可能相关吗？

跟进问题here ...

Answer 1

contenteditable 元素的详尽事件列表与 input 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/