Online WYSIWYG HTML Editor's realization Principle analysis

Online WYSIWYG HTML Editor's realization Principle analysis

This article mainly introduces the realization principle of the WYSIWYG HTML editor on line, this article uses initialization, open editing function, get editor content, add style setting, further and so on to explain the basic realization principle of online editor, need friend can refer to

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

The code is as follows:

Get 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 | | this.getwin (). Document);

},

Opens the Document object, writes the 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 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.

The code is 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.

The code is 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.