Editor | how to write your own editor?

I use too many packages, but many of them are limited, or there are too many features I don"t need
the https://paper.dropbox.com/ and https://medium.com/
are currently stuck

question 1
how does it look like these two editor functions
after I circle the string I want to change, I can see editor?

question 2
after the editor is surfaced, you can make changes to the circled string, such as adding < H1 > or bold body, and adding blockquote ?
what is this principle?

question 3
the EDITOR, that can instantly show HTML should be implemented using the contenteditable of the div tag?


first of all, what I say is based on feeling that I have not practiced it. If I want to be more stable, I suggest looking at those well-known open source projects.
then change the selected text , Note: my following method probably can only change the text, not across nodes . Copy the following code to the console, select a piece of text, and press enter on the console. The effect is shown in figure

.
  https://github.com/tinymce/ti. A widely used rich text editor 

these either use contenteditable , or hide the textarea tag, and simulate the editor's operation with dom.

Menu