A brief analysis of the implementation principle of the online wysiwyg HTML editor

  • 2020-06-01 08:11:18
  • OfStack

The HTML content editor is one of the oldest and most user-friendly tools in web development. Simple functions can provide users with text style control, such as text color, font size, etc. The more complex ones can even offer powerful features like Word1. Although there are a lot of open source editors out there, not many of them are really easy to use, so improvements are still being made.

Most editors on the web today are very powerful, relatively speaking, in use also require a lot of configuration, of course, the code will naturally be more "bloated". If you don't need an editor that powerful, you can implement one yourself, because the code isn't complicated. Here is a point of personal experience, for reference only (take ExtJS's HTMLEditor for example).

1. Initialization. When the page is loaded, add one IFrame (optional) to the page. The important thing to note here is that to determine the state of the page, you should wait for the page to be fully loaded before doing anything to prevent the error of not finding certain elements.

2. Open the editing function. Make IFrame editable (the following code comes from HTMLEditor of ExtJS) :


// To obtain iframe the window object
getWin : function(){
        return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
    }, // To obtain iframe the document object
getDoc : function(){
        return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
}, // Open the document Object to which initialization is written for compatibility FireFox
doc = this.getDoc();
doc.open();
doc.write('<html><head><mce:style type="text/css"><!--
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></head><body></body></html>');
// Open the document Object editing mode
 doc.designMode = "on";
doc.close();

This allows you to write to the editor of the simple one.

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


// Gets the editor's body object
var body = doc.body || doc.documentElement;
// Gets the content of the editor
var content = body.innerHTML;
// Process the content, such as replacing some special characters in it, and so on
//Some code // Returns the content
return content;

4. Add style Settings. The editor above does the basic work, but it's a little too simple. You should add some simple style implementations. The execCommand approach of document makes this idea possible.


// system 1 The execution command method
function execCmd(cmd, value){
    //doc The object is retrieved using the code above
     // call execCommand Method execution command
    doc.execCommand(cmd, false, value === undefined ? null : value);
}; // Change the selected font to bold, Ctrl-B
execCmd('bold');
// Underline, Ctrl-U
execCmd('underline');
// Italicized, Ctrl-I
execCmd('italic');
// Sets the color of the text
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
// Insert at the cursor 1 paragraph
function insertAtCursor(text){
  //win Object reference 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('InsertHTML', text);
    }else if(Ext.isSafari){
      execCmd('InsertText', text);
    }
  }

5. Take one more step. Now that you can change the style, if the editor has a toolbar (which should be a given), you want the buttons on the toolbar to automatically stand out or appear normal, depending on the style of where the cursor is. The queryCommandState() method of document makes this idea possible again.


//doc Object reference above opposite
// Is the cursor in bold
var isBold = doc.queryCommandState('bold');
if(isBold){
  // change Bold Button style
}
// Of course the above code can be merged, this is just 1 A schematic
// The underline
doc.queryCommandState('underline');
// italics
doc.queryCommandState('italic');

This article provides a simple way to implement the editor, and some of the code can be used directly. It is recommended that those who want to implement the editor themselves should refer to the HTMLEditor code in ExtJS, which is both simple and clear, and can be extended on it.

One final note: 1 be aware of browser compatibility issues, and don't wait until the end to test compatibility. With so much JavaScript code, tweaking can be a pain.


Related articles: