Online Editor principles

After reading the popular online editor on the internet, I can't help but want to understand the principle. this is the most widely used open-source online editor I have ever seen... after studying for a day, I finally learned the Core Principles.
First, explain the principles of the Online Editor: first, support for IE5.0 and later versions is required. because IE5.0 and later versions have an editing status, you can enter text in an iframe. then use "document. body. innerHTML "can get the html code in iframe. this is the key. How can I make ifrmae editable?
Function document. onreadystatechange ()
{
HtmlEdit.doc ument. designMode = "On ";
}
Function implementation.
The remaining problem is getting focus and selecting values.
HtmlEdit. focus ();
Var sel = HtmlEdit.doc ument. selection. createRange ();
The preceding two sentences can be used to obtain the planting html code. here, the basic principles are clarified. Then we can use the insertHTML ("str") method to replace the selected values with html characters. the following is a simple demo to demonstrate the online editor with only the BOLD effect. here I use a textarea to obtain the html value in iframe. In actual situations, we can set the display of textarea to false, and then we can submit the content of iframe.
The demo code is as follows:

[Copy to clipboard] [-] CODE:

Online Editor implementation principle (compatible with IE and FireFox)

The line editor is very useful in our daily project development (such as the news system). It can easily edit articles online, saving front pages and other tools. So how does one implement the browser's online editing function? First, we need IE support. After IE5.5, there will be a compilation status. This editing status will be used and javascript will be used to control online editing.
First, there must be an editing box, which is actually an editable webpage. We use iframe to create an editing box.

Add javascript code to specify that HtmlEdit has the Edit function (the complete original code is provided below ):

[Copy to clipboard] [-] CODE:

Principles of WEB online editor

From eWebEditor to FCKeditor, there are many online editors with powerful functions, but their basic principles are quite simple.

I found three main types of editors. I will summarize them and write down their respective advantages and disadvantages.

Use textarea labels directly
Advantage: fast and easy to submit. You can use the UBB label to make up for what you cannot see
Disadvantages: not intuitive, with few functions

Use the CONTENTEDITABLE label of DIV or TABLE to edit a region.
Advantage: It is intuitive and can be used for various effects.
Disadvantage: This label is not available in mozilla. It is only applicable to IE browsers and has high js requirements.

Use document. designMode = "On" of the document in iframe or frame to implement editable
Advantage: it has all the advantages of the second article above, and supports many browsers such as ff.
Disadvantage: High js requirements
The following is a simple example code of the third point.

[Copy to clipboard] [-] CODE: