The basic realization principle of the online editor

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

Gets the window object for the IFRAME getwin:function () {return ext.isie? This.iframe.contentwindow:window.frames[this.iframe.name]; //Get the Document object for the IFRAME getdoc:function () {return Ext.isie. This.getwin (). Document: (This.iframe.contentDocument | | t His.getwin (). Document); },//Open Document object, write initialization content to it to compatible with Firefox doc = This.getdoc (); Doc.open (); Doc.write ('

This allows you to write to this simple editor.

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

Get the body object of the editor var body = Doc.body | | Doc.documentelement; Get the contents of the editor var content = body.innerhtml; Process content, such as replacing some of the special characters, and so on//some code//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.

Uniform Execute Command method function ExecCmd (cmd, value) {//doc object's fetch reference above code//Call ExecCommand Method Execute command Doc.execcommand (cmd, false, value = = = Undefined? Null:value); }; Changes the selected font to bold, Ctrl-b ExecCmd (' bold '); Underline, Ctrl-u execcmd (' underline '); into italics, ctrl-i execcmd (' Italic '); Set the color of the text ExecCmd (' ForeColor ', Ext.issafari | | Ext.isie? ' # ' +color:color); Inserts a section at the cursor function insertatcursor (text) {//win object's fetch reference 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.

Doc object gets reference to the opposite//cursor is bold var isbold = Doc.querycommandstate (' bold '); if (isbold) {//change the style of the Bold button}//Of course the code above can be merged, here is just a schematic//underline doc.querycommandstate (' underline '); Italic 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.