What you see on the line the realization principle of HTML editor _javascript skills

Web site development is increasingly advocating the user experience, to provide users with more convenient tools, and online HTML content editor is one of the more "old" one. Simple features can provide users with style control of text, such as the color of text, font size, and so on, and the complex can even provide the same powerful features like word. Although there are a lot of open source editors, but the real use is not much, so their improvement work has been in progress.

Today, most editors on the Web have very powerful functions, relatively speaking, in the use of a lot of configuration, of course, the code will naturally be more "bloated." If we don't need a powerful editor, we can implement one ourselves because the code is not complex. Here is a little personal experience for reference only (take ExtJS's htmleditor as an example).

1, initialization. When the page has finished loading, add an iframe to the page (optional). Here to note that, to determine the status of the page, you have to wait for the page completely loaded after the operation, to prevent the occurrence of some elements can not find errors.

2, open the editing function. Set the IFRAME as editable (the following code comes from the ExtJS htmleditor):

Copy Code code as follows:

//Get the Window object for IFRAME
Getwin:function () {
         return Ext.isie? This.iframe.contentwindow:window.frames[this.iframe.name];
   },

//Get the Document object for IFRAME
Getdoc:function () {
      ;   return Ext.isie? This.getwin (). Document: (This.iframe.contentDocument | | this.getwin (). Document);
},

//Open the Document object, 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>//Open Document Object editing mode
 doc.designmode = "on";
Doc.close ()

This allows you to write to this simple editor.

3, get the contents of the editor, the code is as follows:

Copy Code code as follows:

Get the body object for the editor
var BODY = Doc.body | | Doc.documentelement;
Get the contents of the editor
var content = body.innerhtml;
Handle content, such as replacing some of the special characters, and so on
Some Code

Back to Content
return content;

4, add style settings. Although the above editor implements the basic function, but it is a bit too simple, should add some simple style implementation. The ExecCommand method of document makes this idea possible.

Copy Code code as follows:

Unified Execution Command method
function ExecCmd (cmd, value) {
Doc object gets reference to the above code
Calling the ExecCommand method to execute a command
Doc.execcommand (cmd, false, value = = undefined? null:value);
};

Change the selected font to bold, ctrl-b
ExecCmd (' bold ');
Underline, Ctrl-u
ExecCmd (' underline ');
into italics, ctrl-i.
ExecCmd (' italic ');
Set the color of text
ExecCmd (' ForeColor ', Ext.issafari | | Ext.isie? ' # ' +color:color);
Insert a piece of content at the cursor
function Insertatcursor (text) {
Win object's get 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, further. Now that you can change the style, if the editor has a toolbar (which should be inevitable), then we also want the buttons on the toolbar to be automatically highlighted or displayed according to the style of the cursor position. The Querycommandstate () method of document makes this idea possible.

Copy Code code as follows:

Doc object's get reference to the opposite above
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, here is just a schematic

Underline
Doc.querycommandstate (' underline ');
Italic body
Doc.querycommandstate (' italic ');

This article simply provides a simple way to implement the editor, some of which can be used directly. Suggestion, the friend that wants to realize editor by oneself can refer to the HTMLEditor code in the next ExtJS, both simple and clearer, can expand on it.

One last caveat: Be sure to be aware of browser compatibility issues, and don't wait until the end of the test compatibility, for such a large number of JavaScript code, adjustment is more painful things.