Nowadays, website development is more and more advocating user experience and providing more and more convenient tools for users. The online HTML Content editor should be regarded as an old one. Simple functions can provide users with style Control of text, such as text color and font size. Complicated functions can even provide powerful functions like word. Although there are a lot of open-source editors, there are not many of them, so their improvement work is still in progress.
Today, most editors on the Internet have powerful functions, and many configurations are required. Of course, the code will naturally be "bloated ". If we don't need a powerful Editor, we can implement it by ourselves, because the code is not complex. The following is my personal experience for your reference only (taking extjs's htmleditor as an example ).
1. initialization.After the page is loaded, add an IFRAME (optional) to the page ). It should be noted that to determine the page status, you must wait until the page is fully loaded before the operation, to prevent the error that some elements cannot be found.
2. Enable the editing function.Set IFRAME to editable (the following code comes from extjs's htmleditor ):
// Obtain the IFRAME window object <br/> getwin: function () {<br/> return Ext. isie? This. IFRAME. contentWindow: window. frames [this. IFRAME. name]; <br/>}, </P> <p> // obtain the Document Object of IFRAME <br/> getdoc: function () {<br/> return Ext. isie? This.getwin().doc ument: (this. IFRAME. contentdocument | this.getwin().doc ument); <br/>},</P> <p> // open the Document Object and write initialization content to it, to be compatible with Firefox <br/> Doc = This. getdoc (); <br/> Doc. open (); <br/> Doc. write ('<HTML> <pead> <MCE: style type = "text/CSS"> <! -- <Br/> body {border: 0; margin: 0; padding: 3px; Height: 98%; cursor: Text ;}< br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> body {border: 0; margin: 0; padding: 3px; Height: 98%; cursor: text ;} </style> </pead> <body> </ptml> '); <br/> // open the Document Object editing mode <br/> Doc. designMode = "on"; <br/> Doc. close ();
In this way, you can write content to this simple editor.
3. Get the editor content,The Code is as follows:
// Obtain the editor's body object <br/> var body = Doc. body | doc.doc umentelement; <br/> // obtain the editor content <br/> var content = body. innerhtml; <br/> // process the content, for example, replace some special characters among them. <br/> // some code </P> <p> // return content <br/> return content;
4. Add style settings.The editor above implements basic functions, but it is a little too simple. You should add some simple style implementations. The Execcommand method of document makes this idea possible.
// Unified command execution method <br/> function execcmd (CMD, value) {<br/> // reference the above Code for obtaining the doc object <br/> // call the Execcommand method to execute the command <br/> doc.exe ccommand (CMD, false, value === undefined? Null: value); <br/>}; </P> <p> // change the selected font to a black box, Ctrl-B <br/> execcmd ('bold '); <br/> // underline, Ctrl-u <br/> execcmd ('underline'); <br/> // italic, CTRL-I <br/> execcmd ('italic '); <br/> // set the text color <br/> execcmd ('forecolor', ext. issafari | Ext. isie? '#' + Color: color); <br/> // insert a piece of content at the cursor <br/> function insertatcursor (text) {<br/> // For the win object, refer to the above Code <br/> If (ext. isie) {<br/> win. focus (); <br/> var r = Doc. selection. createRange (); <br/> If (r) {<br/> r. collapse (true); <br/> r. pastehtml (text) ;}< br/>}else if (ext. isgecko | Ext. isopera) {<br/> win. focus (); <br/> execcmd ('insertml', text); <br/>} else if (ext. issafari) {<br/> execcmd ('inserttext', text); <br/>}< br/>}
5. Proceed.Now you can change the style. If the editor has a toolbar (this should be inevitable), we also want the buttons on the toolbar to automatically highlight or display normally according to the style at the cursor position. The queryCommandState () method of document allows this idea to be realized.
// For information about the doc object, see <br/> // whether the cursor is in bold <br/> var isbold = Doc. queryCommandState ('bold '); <br/> If (isbold) {<br/> // change the bold button style <br/>}< br/> // Of course, the above Code can be merged, here is just a schematic </P> <p> // underline <br/> Doc. queryCommandState ('underline'); <br/> // italic <br/> Doc. queryCommandState ('italic ');
This article only provides a simple idea for implementing the editor, some of which can be used directly. It is recommended that users who want to implement the editor can refer to the htmleditor code in extjs, which is simple and clear and can be expanded on it.
Last Note: you must pay attention to the compatibility of the browser, and do not wait until the end to test compatibility. It is quite painful to adjust such a large amount of JavaScript code.
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
