简单html编辑器原理

来源:互联网 发布:php做99乘法表 编辑:程序博客网 时间:2024/06/06 01:02

<IFRAME id="HtmlEdit" style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0></IFRAME>
     
    并且在加上javascript代码来指定HtmlEdit有编辑功能:
     
     
    <script language="javascript"><!--
    var editor;
    editor = document.getElementById("HtmlEdit").contentWindow;
     
   //只需键入以下设定,iframe立刻变成编辑器。
   editor.document.designMode = 'On';
   editor.document.contentEditable = true;
    
   //但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。
   editor.document.open();
   editor.document.writeln('<html><body></body></html>');
   editor.document.close();
    
   //字体特效 - 加粗方法一  
   function addBold()
   {
   editor.focus();
   //所有字体特效只是使用execComman()就能完成。
   editor.document.execCommand("Bold", false, null);
   }
   //字体特效 - 加粗方法二  
   function addBold()
   {
   editor.focus();
   //获得选取的焦点
   var sel = editor.document.selection.createRange();
   insertHTML("<b>"+sel.text+"</b>");
   }
   function insertHTML(html)
   {
   if (editor.document.selection.type.toLowerCase() != "none")
   {
   editor.document.selection.clear() ;
   }
   editor.document.selection.createRange().pasteHTML(html) ;  
   }
   // --></script>