Javascript Web Editor-compatible with ff and IE

Background:
Creat requires text analysis. The main task is to identify useful elements and mark them manually or automatically from a large segment of original requirement text.
Due to the arbitrariness of natural text, automatic methods cannot completely and accurately obtain the text processing results. Even manual processing usually requires several rounds of iterative analysis.
The Web editor is designed to support manual processing.

Implementation Instructions:

IFRAME is the subject of the editor.

Set the IFRAME attribute. IFRAME can be used as the editor.

<IFRAME frameborder = "0" id = "webeditor" style = "border: 1px dashed black;
Height: 320px; width: 760px "> </iframe>
<Script language = "JavaScript">
Editor = Document. getelementbyid ("webeditor"). contentWindow;
Editor.doc ument. designMode = "on"; // make the document editable
Editor.doc ument. open (); // For ff, open a new document to edit the new content
// Editor.doc ument. Write (""); // you can set header information. IFRAME can be viewed as an independent HTML page.
Editor.doc ument. Close (); // close document, force send data display
</SCRIPT>

JavaScript processing text format

Call the Execcommand function to process text. You can perform the following operations: Rough downgrading, alignment, hyperlink, and font (size, color, and other functions)
Execcommand function Syntax:

Bsuccess=Object. Execcommand (Scommand,Buserinterface,Vvalue)

Document.exe ccommand () Parsing

Function Format (what, OPT)
{
Editor. Focus ();
Editor.document.exe ccommand (what, false, OPT );
}

Recognize selected text and manipulate dom

There are several differences between FF and IE. One is press enter, and the other is <p> in IE, which is much less than FF <br/>, the solution is to reload the carriage return event of the editor document:

Editor.doc ument. onkeypress = fnkeypress;
Function fnkeypress (){
If (document. All ){
VaR EV = editor. event;
If (EV. keycode = 13 &&! Ev. shiftkey) {// determines the return key
VaR S = editor.doc ument. selection;
If (s! = NULL ){
VaR r = S. createRange ();
If (R! = NULL ){
R. pastehtml ("<br/> ");
R. Select (); // move the cursor to a new row
}
}
Return false;
}
}
}

Process selected text:

Function Message ()
{
If (document. All) // if it is ie. (although, FF can also use document. All)
Alert(editor.doc ument. selection. createRange (). Text );
Else {
// Alert(editor.doc ument. getselection ());
Alert (editor. getselection ());
VaR selection = editor. getselection (). getrangeat (0 );
VaR linkelement = editor.doc ument. createelement ("A"); // create a new <A> node
Linkelement. href = "http://asers.blog.sohu.com"; // set the href attribute of the <A> node
Selection. surroundcontents (linkelement); // Add a hyperlink
}
}

Insert HTML code:

Function insert (HTML)
{
Debugger;
If (window. Event)
Editor.doc ument. selection. createRange (). pastehtml (HTML );
Else
Format ("inserthtml", HTML );
}

Demo:

Web Editor demo

Refer:

IE and Firefox have different resolutions for the same source code

Summary of the compatibility between IE and FF in JS

Gecko DOM reference