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

Source: Internet
Author: User
Tags wysiwyg html editor

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.