Listen to specific changes on contenteditable?

Question

Warning: not duplicate with existing questions, read through

I know I can have an event listen on changes on an contenteditable element.

What I would like is to be able to know what the changes are.

For example:

• inserted "This is a sentence." at position X.
• deleted from position X to Y.
• formatted from X to Y with <strong>

Is that possible? (other than by doing a diff I mean)

---

The reason for this is to make a WYSIWYG editor of other languages than HTML, for example Markdown.

So I'd like to apply the changes to the Markdown source (instead of having to go from HTML to Markdown).

Answer 1

You may be able to do something with MutationObservers (falling back to DOM Mutation events in older browsers, although IE <= 8 supports neither) but I suspect it will still be hard work to achieve what you want.

Here's a simple example using MutationObservers:

http://jsfiddle.net/timdown/4n2Gz/

Answer 2

Sorry, but there is no way to find out what the changes are without doing a diff between the original content and the modified one when changes occur.