首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页，我们用iframe来建立编辑框。

并且在加上javascript代码来指定HtmlEdit有编辑功能：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' '<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>'>
<html xmlns='<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script language="javascript">
   var editor;

function document.onreadystatechange(){
editor = document.getElementById("HtmlEdit").contentWindow;
     //只需键入以下设定，iframe立刻变成编辑器。
     //但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document。
     editor.document.open();
     editor.document.writeln("<html><head></head><body> 在线编辑器在我们日常的项目开发中非常有用（如新闻系统），它可以方便地实现文章的在线编辑，省掉了FrontPage等工具。那么是怎样实现浏览器在线编辑功能的呢? 首先需要IE的支持,在IE5.5以后就有一个编辑状态. 就是利用这个编辑状态,然后用javascript来控制在线编辑的。");

     editor.document.writeln("首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页，我们用iframe来建立编辑框。</body></html>");
     editor.document.close();

   editor.document.designMode ="On";
   editor.document.contentEditable = true;

   editor.focus();
   return;
   }

     //字体特效－加粗方法一
     function addBold()
     {
      editor.focus();
      //所有字体特效只是使用execComman()就能完成。
      editor.document.execCommand("Bold", false, null);
     }

     //字体特效－加粗方法二
     function addBoldII()
     {
      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>
</head>

<body>
<h4><a href="#" onclick="return addBoldII()">选中文字加粗</a></h4>
<IFRAME id="HtmlEdit" style="WIDTH:100%;HEIGHT:296px;"></IFRAME>
</body>
</html>

posted on 2010-07-15 11:22 ddxgc 阅读(3138) 评论(0) 收藏举报

刷新页面返回顶部

公告