4

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) through 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...

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Basile Starynkevitch
  • 223,805
  • 18
  • 296
  • 547
  • 1
    If you want to reject some user actions, the solution is to listen for low-level key/mouse events and cancel them if something is about to happen that you don't want (sort of hinted at in the answer you linked). As for an exhaustive list of events, it's basically just going to be the usual events, nothing particular to contenteditable/designmode, except for the new `input` event. – Dagg Nabbit May 07 '13 at 21:55

1 Answers1

2

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/

rvighne
  • 20,755
  • 11
  • 51
  • 73