与contenteditable相关的用户事件 [英] user events related to contenteditable

问题描述

^{我是Javascript& amp;的初学者HTML5}

假设我有一个满足的< div> [块级]元素HTML5窗口。

Suppose I have a contenteditable <div> [block-level] element in my HTML5 window.

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

What is the exhaustive list of Javascript events which the user could trigger by modifying this element (or some sub-elements) thru user interaction ?

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

How should I code in Javascript to reject some user action? or change the DOM... (i.e. replace some TextNode with e.g. some <span>)

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

It seems that the input event cannot "undo" or "reject" some user action...

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

FWIW, at this point I only care about recent Firefox browsers (mine is 21 beta 7 on Linux).

这是对相关问题的回答。

换句话说，我没有清楚了解如何设计富文本编辑器在HTML5& Javascript。

In other words, I don't have a clear picture of how to design rich text editors in HTML5 & Javascript.

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

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

后续问题这里 ...

推荐答案

关于contenteditable元素的详尽事件列表与input type = text相同。查看所有活动的列表（特别注意表格活动）： http://www.w3schools.com /tags/ref_eventattributes.asp

The exhaustive list of events on contenteditable elements is the same as for input type=text. See this list of all events (look especially at Form Events): http://www.w3schools.com/tags/ref_eventattributes.asp

如何在Javascript中编码以拒绝某些用户操作？...只需输入event.preventDefault（） 在该事件发生的事件监听器的开头。拒绝按键的示例：

"How should I code in Javascript to reject some user action?"... just put "event.preventDefault()" at the beginning of an event listener for the event of that action. Example to reject keypresses:

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-优秀的免费富文本编辑/

As to designing rich text editors, there are many good demos available. I recommend: https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla http://www.quirksmode.org/dom/execCommand/ Make sure to view source of the last link; especially the buttons.js file. Also check out the amazing commands list on the MDN article. Good luck -- but try not to re-invent the wheel. There are many well-tested editors out there; check out this list: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

这篇关于与contenteditable相关的用户事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！