Facebook's draft.js[1] tries to solve a lot of these problems and uses React under the hood to maintain a mapping between the model of the document that you are editing and the DOM.

I have only played with it, not used it in production, but if you are using React it could be a good solution.

The one limitation I've seen is that is doesn't really support documents that need a hierarchical model (an example of this would be tables, but also things like "I want a code block within a blockquote").

If you want to see draft.js's document model, I made a tool to do that, too[2].

[1]: https://facebook.github.io/draft-js/ [2]: http://afiedler.github.io/draft-js-dm-demo/