4

我是 Javascript 和 HTML5 的初学者

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

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

我应该如何在 Javascript 中编码以拒绝某些用户操作？或更改 DOM ...（即替换一些 TextNode 为例如 some <span>）

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

FWIW，此时我只关心最近的 Firefox 浏览器（我的是 Linux 上的 21 beta 7）。

这是对相关问题的回答。

换句话说，我对如何在 HTML5 和 Javascript 中设计富文本编辑器没有一个清晰的认识。

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

附加物

也许突变观察者可能是相关的？

后续问题在这里...

4

1 回答 1

2

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/

于 2013-06-18T00:45:38.100 回答