Implementation principle of online editor (compatible with IE and FireFox)

Home

Web Front-end

JS Tutorial

Implementation principle of online editor (compatible with IE and FireFox)_javascript skills

May 16, 2016 pm 07:17 PM

Online editors are very useful in our daily project development (such as news systems). It can easily implement online editing of articles, eliminating the need for tools such as FrontPage. So how to implement the online editing function of the browser? First of all, it requires the support of IE. After IE5.5, there is an editing state. This editing state is used, and then javascript is used to control the online editing.
First of all, there must be an edit box. This edit box is actually an editable web page. We use iframe to create the edit box.
<IFRAME id="HtmlEdit" style="WIDTH: 100%; HEIGHT: 296px" marginWidth="0" marginHeight="0"></IFRAME>
And add javascript code to Specify HtmlEdit to have editing function (the complete original code is provided below):

Copy the code The code is as follows:

<script language="javascript"> 
 var editor; 
 editor = document.getElementById("HtmlEdit").contentWindow; 

 //Just type the following settings, iframe Become an editor immediately. 
 editor.document.designMode = 'On'; 
 editor.document.contentEditable = true; 

 //But IE is a little different from FireFox. In order to be compatible with FireFox, a new document must be created . 
 editor.document.open(); 
 editor.document.writeln('<html><body></body></html>'); 
 editor.document.close (); 

 //Font effects – Bold method one 
 function addBold() 
 { 
 editor.focus(); 
 //All font effects just use execComman( ) can be completed. 
 editor.document.execCommand("Bold", false, null); 
 } 
 //Font effects - Bold method two 
 function addBold() 
 { 
 editor. focus(); 
 //Get the selected focus
 var sel = editor.document.selection.createRange(); 
 insertHTML("<b>" sel.text "</b>" ); 
 } 
 function insertHTML(html) 
 editor.document .selection.clear() ; 
                                            

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn