A brief analysis of the implementation principles of online WYSIWYG HTML editor

A brief analysis of the implementation principles of online WYSIWYG HTML editor_javascript skills

WBOY

Release： 2016-05-16 16:02:19

Original

1420 people have browsed it

Nowadays, website development is increasingly promoting user experience, and there are more and more tools to provide users with convenience, and the online HTML content editor should be considered one of the "older" ones. Those with simple functions can provide users with text style control, such as text color, font size, etc.; while those with complex functions can even provide powerful functions similar to Word. Although there are many open source editors now, not many are really easy to use, so their improvement work is always in progress.

Most editors on the Internet today have very powerful functions. Relatively speaking, they also require a lot of configuration during use. Of course, the code will naturally be "bloated". If we don't need such a powerful editor, we can implement one ourselves, because the code is not complicated. The following is a bit of personal experience, for reference only (taking ExtJS HTMLEditor as an example).

1. Initialization. When the page has finished loading, add an IFrame to the page (optional). What should be noted here is that to determine the status of the page, wait until the page is completely loaded before proceeding to prevent errors in which certain elements cannot be found.

2. Open the editing function. Make the IFrame editable (the code below comes from ExtJS’s HTMLEditor):

Copy code The code is as follows:

// Get the window object of iframe
getWin : function(){
return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},

//Get the document object of iframe
getDoc: function(){
return Ext.isIE ? this.getWin().document: (this.iframe.contentDocument || this.getWin().document);
},

//Open the document object and write initialization content to it to be compatible with FireFox
doc = this.getDoc();
doc.open();
doc.write('

');
//Open document object editing mode
doc.designMode = "on";
doc.close();

This way you can write content into this simple editor.

3. Get the content of the editor, the code is as follows:

Copy code The code is as follows:

//Get the editor’s body object
var body = doc.body || doc.documentElement;
//Get the content of the editor
var content = body.innerHTML;
//Process the content, such as replacing some special characters, etc.
//Some code

//Return content
return content;

4. Add style settings. Although the above editor implements basic functions, it is really too simple. Some simple style implementations should be added. The document's execCommand method makes this idea possible.

Copy code The code is as follows:

//Uniform execution command method
function execCmd(cmd, value){
//To obtain the doc object, refer to the above code
//Call the execCommand method to execute the command
doc.execCommand(cmd, false, value === undefined ? null : value);
};

//Change the selected font to bold, Ctrl-B
execCmd('bold');
//Underline, Ctrl-U
execCmd('underline');
//Change to italics, Ctrl-I
execCmd('italic');
//Set the color of the text
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#' color : color);
//Insert a piece of content at the cursor
function insertAtCursor(text){
//To obtain the win object, refer to the code above
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('InsertHTML', text);
}else if(Ext.isSafari){
execCmd('InsertText', text);
}
}

5. Go one step further. Now you can change the style. If the editor has a toolbar (this should be inevitable), then we also want the buttons on the toolbar to be automatically highlighted or displayed normally according to the style of the cursor position. The queryCommandState() method of document allows this idea to be realized.

Copy code The code is as follows:

//To obtain the doc object, refer to the opposite side
//Whether the cursor is bold
var isBold = doc.queryCommandState('bold');
if(isBold){
//Change the style of the Bold button
}
//Of course the above code can be merged, this is just a hint

//Underline
doc.queryCommandState('underline');
//italic
doc.queryCommandState('italic');

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

One final reminder: Be sure to pay attention to browser compatibility issues, and don’t wait until the end to test compatibility. For such a large amount of JavaScript code, adjustments are more painful.