Implementation principle of Online Editor (compatible with IE and FireFox)

Online editors are very useful in our daily project development (such as news systems). They can easily edit articles online, saving FrontPage and other tools. So how does one implement the browser's online editing function? Internet Explorer is required first. After IE5.5, there is an editing status. This editing status is used and javascript is 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.
<IFRAME id = "HtmlEdit" style = "WIDTH: 100%; HEIGHT: 296px" marginWidth = "0" marginHeight = "0"> </IFRAME>
Add javascript code to specify that HtmlEdit has the Edit function (the complete original code is provided below ):
Copy codeThe Code is as follows:
<Script language = "javascript">
Var editor;
Editor = document. getElementById ("HtmlEdit"). contentWindow;

// Simply enter the following settings and the iframe is immediately changed to the editor.
Editor.doc ument. designMode = 'on ';
Editor.doc ument. contentEditable = true;

// But IE is a little different from FireFox. To be compatible with FireFox, you must create a new document.
Editor.doc ument. open ();
Editor.doc ument. writeln ('Editor.doc ument. close ();

// Font effects-bold method 1
Function addBold ()
{
Editor. focus ();
// All font effects can only be completed using execComman.
Editor.document.exe cCommand ("Bold", false, null );
}
// Font effects-bold method 2
Function addBold ()
{
Editor. focus ();
// Obtain the selected focus
Var sel = editor.doc ument. selection. createRange ();
InsertHTML ("<B>" + sel. text + "</B> ");
}
Function insertHTML (html)
{
If (editor.doc ument. selection. type. toLowerCase ()! = "None ")
{
Editor.doc ument. selection. clear ();
}
Editor.doc ument. selection. createRange (). pasteHTML (html );
}

</Script>