Analysis on the implementation principle of the online wysiwyg html editor, WYSIWYG Analysis

Analysis on the implementation principle of the online wysiwyg html editor, WYSIWYG Analysis

Nowadays, website development is more and more advocating user experience and providing more and more convenient tools for users. The online HTML Content editor should be regarded as an old one. Simple functions can provide users with style Control of text, such as text color and font size. Complicated functions can even provide powerful functions like Word. Although there are a lot of open-source editors, there are not many of them, so their improvement work is still in progress.

Today, most editors on the Internet have powerful functions, and many configurations are required. Of course, the code will naturally be "bloated ". If we don't need a powerful Editor, we can implement it by ourselves, because the code is not complex. The following is my personal experience for your reference only (taking ExtJS's HTMLEditor as an example ).

1. initialization. After the page is loaded, add an IFrame (optional) to the page ). It should be noted that to determine the page status, you must wait until the page is fully loaded before the operation, to prevent the error that some elements cannot be found.

2. Enable the editing function. Set IFrame to editable (the following code comes from ExtJS's HTMLEditor ):
Copy codeThe Code is as follows:
// Obtain the window object of iframe
GetWin: function (){
Return Ext. isIE? This. iframe. contentWindow: window. frames [this. iframe. name];
},

// Obtain the document Object of iframe
GetDoc: function (){
Return Ext. isIE? This.getWin().doc ument: (this. iframe. contentDocument | this.getWin().doc ument );
},

// Open the document Object and write initialization content to it to be compatible with FireFox
Doc = this. getDoc ();
Doc. open ();
Doc. write ('Body {border: 0; margin: 0; padding: 3px; height: 98%; cursor: text ;}
--> </Mce: style> <style type = "text/css" mce_bogus = "1"> body {border: 0; margin: 0; padding: 3px; height: 98%; cursor: text ;}</style> // Enable the document Object editing mode
Doc. designMode = "on ";
Doc. close ();

In this way, you can write content to this simple editor.
 
3. Get the editor content with the following code:
Copy codeThe Code is as follows:
// Obtain the editor body object
Var body = doc. body | doc.doc umentElement;
// Get the editor content
Var content = body. innerHTML;
// Process the content, such as replacing some special characters
// Some code

// Return content
Return content;

4. Add style settings. The editor above implements basic functions, but it is a little too simple. You should add some simple style implementations. The execCommand method of document makes this idea possible.

Copy codeThe Code is as follows:
// Unified Command Execution Method
Function execCmd (cmd, value ){
// Refer to the above Code for obtaining the doc object
// Call the execCommand method to execute the command
Doc.exe cCommand (cmd, false, value === undefined? Null: value );
};

// Change the selected font to the black body, Ctrl-B
ExecCmd ('bold ');
// Underline, Ctrl-U
ExecCmd ('underline ');
// Change to italic, Ctrl-I
ExecCmd ('italic ');
// Set the text color
ExecCmd ('forecolor', Ext. isSafari | Ext. isIE? '#' + Color: color );
// Insert a piece of content at the cursor
Function insertAtCursor (text ){
// For information about win objects, refer to the above Code.
If (Ext. isIE ){
Win. focus ();
Var r = doc. selection. createRange ();
If (r ){
R. collapse (true );
R. pasteHTML (text );}
} Else if (Ext. isGecko | Ext. isOpera ){
Win. focus ();
ExecCmd ('insertml', text );
} Else if (Ext. isSafari ){
ExecCmd ('insertext', text );
}
}

5. Proceed. Now you can change the style. If the editor has a toolbar (this should be inevitable), we also want the buttons on the toolbar to automatically highlight or display normally according to the style at the cursor position. The queryCommandState () method of document allows this idea to be realized.
Copy codeThe Code is as follows:
// For information on obtaining the doc object, see the opposite section above.
// Whether the cursor is in bold
Var isBold = doc. queryCommandState ('bold ');
If (isBold ){
// Change the Bold button style
}
// Of course, the above Code can be merged. Here is just a signal

// Underline
Doc. queryCommandState ('underline ');
// Italic
Doc. queryCommandState ('italic ');

This article only provides a simple idea for implementing the editor, some of which can be used directly. It is recommended that users who want to implement the editor can refer to the HTMLEditor code in ExtJS, which is simple and clear and can be expanded on it.

Last Note: you must pay attention to the compatibility of the browser, and do not wait until the end to test compatibility. It is quite painful to adjust such a large amount of JavaScript code.