Usually web based rich text editors just use a <div> with contenteditable=true. They don't manually manage the textual data. The browser manages the data, automatically adding and removing <p> elements to contain the data. The editor just adds buttons which call built-in functions that transform the text.

I imagine someone somewhere has written a more complex editor that manages things a lot more manually, though. I checked the first one you linked (quill), and it, as expected, uses contenteditable.

content editable has it's own problems (https://medium.com/medium-eng/why-contenteditable-is-terribl...), and more modern rich text editors do build up some kind of model of the data they are representing. My favorite is prosemirror, which presents the user a contenteditable, but maps changes as transformations to it's own internal document model. Each version of the document is immutable and it uses a fast diffing algo (similar to react) to determine the DOM mutation steps necessary to represent the newest version document. As a result, it becomes "trivial" to support multi-user collaboration, since you just import the other user's transformations to the document model as they come in (http://prosemirror.net/demo/collab.html#edit-Example). Since the entire document is now modeled as a tree structure, it becomes easy to do custom serialization/deserialization, ie: to markdown and back again (http://prosemirror.net/demo/markdown.html).

Here's a simple demo: http://jsbin.com/satakudifa/1/edit?html,css,output

It's way easier than you might expect. Only one line of JS needed for this demo (inline `onclick` handler for the bold button). Shortcuts like Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+C, Ctrl+V, Ctrl+X, Ctrl+Z work out of the box (in Chrome; IIRC Firefox might open bookmarks for one of those).

Most of rich-text editor i know (quill, trix,...) uses contentEditable just for render surface.

Try to open your console when use quill and type `quill.getContents()`. And try this with Trix: `document.querySelector('trix-editor').editor.getDocument()`.

Seems like you don't know what is 'rich-text' at all.