Implementation principle of the wysiwyg html editor

Implementation principle of the wysiwyg html editor

 Implementation principle of the wysiwyg html editor

This article mainly introduces how the wysiwyg html editor works, this article describes the basic implementation principles of the online editor by using initialization, opening the editing function, obtaining the editor content, adding style settings, and further steps. For more information, see

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 ):

The 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 (' ');

// 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 the Code 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.

The 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.

The 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.