user events related to contenteditable

问题

^{I am a beginner in Javascript & HTML5}

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

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

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, at this point I only care about recent Firefox browsers (mine is 21 beta 7 on Linux).

this is an answer to a related question.

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

^{PS I want plain Javascript, not interested in any library above it yet.}

addenda

Maybe mutation observers could be relevant?

Follow-up question here...

回答1:

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

"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...
});

To undo a user's action:

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

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/

来源：https://stackoverflow.com/questions/16429006/user-events-related-to-contenteditable