The online HTML Content Editor provides text style control, such as text color and font size. Although many powerful editors (such as FCKeditor) are available on the Internet, many complicated configurations are required.CodeIt is often "bloated ". This document describes how to develop an HTML editor. Using the methods described in this article, you can easily develop an HTML editor that meets your needs and has relatively simplified code. The following is an HTML editor developed using the method described in this article, which implements some simple functions:
Code download
The development method is as follows:
1. Add an editable IFRAME
Step 1 of implementing the HTML editor is to place an editable IFRAME In the webpage to input text, so that the IFRAME editable method is quite simple. You only need to set the IFRAME designMode to on, the procedure is as follows:
VaR editor = document. getelementbyid ("iframe ID"); var editordoc = editor.content20.doc ument; var editorwindow = editor. contentWindow; editordoc. designMode = "on"; editordoc. open (); editordoc. write ("<HTML>2. Set the style of the selected textThe simplest option of the alternative type is document.exe ccommand, but the Execcommand function is limited and sometimes cannot meet the requirements. For example, Execcommand can only set the font size to 1-7 and cannot use the pixel size, if you click another Div when you click the toolbar button to call Execcommand, the selected IFRAME content will disappear, and the Execcommand call will be invalid. Therefore, this article introduces another method. The basic idea is as follows:
2.1 obtain the selected html
(1) obtain the selected HTML;
(2) modify the HTML style;
(3) Replace the selected HTML with the modified HTML.
The methods for obtaining the selected HTML in different browsers are different. You can use
VaR range = Document. selection. createRange ()
In Firefox and chrome
2.2 Replace the selected htmlVaR range = Window. getselection (). getrangeat (0 );
After obtaining the object indicating the selected content through the 2.1 method, you can call the method to replace the selected content. The method for replacing the selected HTML in different browsers is different. In IE, you only need to call range. pastehtml is enough. In Firefox and chrome, range is used. deletecontents and range. insertnode implementation
2.3 encapsulate an HTML classbecause the range object methods obtained in 2.1 vary greatly in different browsers, to facilitate the two operations mentioned in 2.1 and 2.2, this class encapsulates the selectionrange of the selected html. The class has two methods: getselectedhtml and replace, which are used to obtain HTML and replace HTML respectively. The Code is as follows:
// Record the browser type var browser ={}; var UA = navigator. useragent. tolowercase (); browser. MSIE = (/MSIE ([\ D.] + )/). test (UA); browser. firefox = (/Firefox \/([\ D.] + )/). test (UA); browser. chrome = (/chrome \/([\ D.] + )/). test (UA); // obtain the htmlfunction getinnerhtml (nodes) {var builder = []; for (VAR I = 0; I <nodes. length; I ++) {If (nodes [I]. nodevalue! = Undefined) {builder. push (nodes [I]. innerhtml);} else {If (nodes [I]. textcontent) builder. push (nodes [I]. textcontent. replace (// </ig, function () {return "<" ;})); else if (nodes [I]. nodevalue) builder. push (nodes [I]. nodevalue. replace (// </ig, function () {return "<" ;})) ;}} return builder. join ("");} function selectionrange (Doc, range) {// obtain the HTML of the selected content this. getselectedhtml = function () {If (range = Null) Return ""; if (browser. MSIE) {If (range.html text! = Undefined) return range.html text; else return "";} else if (browser. firefox | browser. chrome) {return getinnerhtml (range. clonecontents (). childnodes);} else {return "" ;}// use HTML to replace the HTML this of the selected content. replace = function (HTML) {If (range! = NULL) {If (browser. MSIE) {If (range. pastehtml! = Undefined) {// currently selected HTML may be lost for some reason (for example, when another div is clicked) and range is re-selected. select (); range. pastehtml (HTML); Return true ;}} else if (browser. firefox | browser. chrome) {If (range. deletecontents! = Undefined & range. insertnode! = Undefined) {// convert text HTML to DOM object var temp = Doc. createelement ("Div"); temp. innerhtml = HTML; var elems = []; for (VAR I = 0; I <temp. childnodes. length; I ++) {elems. push (temp. childnodes [I]);} // Delete the selected node range. deletecontents (); // Insert the corresponding HTML nodes (that is, all the child nodes of temp) to the range one by one, and delete for (var I in elems) {temp. removechild (elems [I]); range. insertnode (elems [I]);} return true ;}}return false ;}}At the same time, the getselectionrange function is also implemented to obtain the selectionrange object corresponding to the selected text,
2.4 modify the selected HTML StyleFunction getselectionrange (WIN) {var range = NULL; If (browser. MSIE) {range = win.doc ument. selection. createRange (); If (range.parentelement().doc ument! = Win.doc ument) {range = NULL;} else if (browser. firefox | browser. chrome) {var sel = win. getselection (); If (SEL. rangecount> 0) range = SEL. getrangeat (0); else range = NULL;} return New selectionrange(win.doc ument, range );}
It is not complicated to modify the selected HTML style. You only need to convert the HTML to a DOM object and recursively set the style value corresponding to each node. The Code is as follows:
Function setnodestyle (Doc, node, name, value) {If (node. innerhtml = undefined) {return node;} else {node. style [name] = value; For (VAR I = 0; I <node. childnodes. length; I ++) {var Cn = node. childnodes [I]; If (node. innerhtml! = Undefined) {setnodestyle (Doc, CN, name, value) ;}} return node ;}} function setstyle (Doc, HTML, name, value) {var dom = Doc. createelement ("Div"); Dom. innerhtml = HTML; For (VAR I = 0; I <Dom. childnodes. length; I ++) {var node = Dom. childnodes [I]; If (node. innerhtml = undefined) {// if it is a text node, convert it to span var span = Doc. createelement ("span"); span. style [name] = value; If (node. nodevalue! = Undefined) span. innerhtml = node. nodevalue. Replace (/\ </ig, function () {return "<" ;}); else if (node. textcontent! = Undefined) span. innethtml = node. textcontent. replace (// </ig, function () {return "<" ;}); // Replace the DOM of the text node. replaceChild (span, node);} else {setnodestyle (Doc, node, name, value);} return Dom. innerhtml ;}2.5 example
With the above code, you can easily implement an HTML editor. For example, the following code sets the font size of the selected text to 32px:
VaR range = getselectionrange (editorwindow); var html = setstyle (editordoc, range. getselectedhtml (), "fontsize", "32px"); range. Replace (HTML );
Similarly, you can set line spacing, indentation, and image insertion.
3. Summary
The Code provided in this article is compatible with IE, Firefox, and chrome. If you have any other questions, contact me via email or webim.
Author: Lu chuncheng
E-mail: mrlucc@126.com
Source: http://lucc.cnblogs.com/
The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent andArticleThe original text connection is displayed at an obvious position on the page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
