您所在的位置: 程序员家园 -> 家园博客 ->
 
在哪里摔倒
就在哪里自己爬起来

用户登录

查  找

最新评论

最新留言

常用网站

网易邮箱 GMAIL  

百度搜索 MSDN

霏凡软件 BT精品

影视帝国 射 手 网

电驴下载 全 库 网

友情连接

茄菲的窝 冰冰博客

枫叶飘零 玫  瑰

ACEN 云 豹 子

统  计



html编辑器,第二步了
狼子 发表于 2006-10-25 21:41:00 阅读全文 | 回复(0) | 引用通告 | 编辑

第一步在这里:user1/9/archives/2006/2614.html

第二步呢,换成了JavaScript了,用execCommand可以完成的东西,经常要用到的都加上了,把div换了iframe了,使用iframe,可以在同一个位置显示设计和代码模式

<html>
 <body>
  <center>
   <div unselectable="on" align="center" style="height:360; width:400; background-color:menu; border:outset menu">
    <br>
    <iframe name="wood_content" id="wood_content" width="350" height="250"></iframe>
    <br>
    <input type="button" value="粗体" unselectable="on" onclick="deal('Bold');">
    <input type="button" value="斜体" unselectable="on" onclick="deal('Italic');">
    <input type="button" value="下划线" unselectable="on" onclick="deal('Underline');">
    <input type=button value="黑体" onclick="deal('FontName');">
    <input type=button value="9号字" onclick="deal('FontSize');">
    <input type=button value="红色字" onclick="deal('ForeColor');">
    <br>
    <input type=button value="上标" onclick="deal('superscript');">
    <input type=button value="下标" onclick="deal('subscript');">
    <br>
    <input type=button value="左对齐" onclick="deal('justifyleft');">
    <input type=button value="居中" onclick="deal('justifycenter');">
    <input type=button value="右对齐" onclick="deal('justifyright');">
    <input type=button value="编号" onclick="deal('insertorderedlist');">
    <input type=button value="项目符号" onclick="deal('insertunorderedlist');">
    <br>
    <input type=button value="撤消" onclick="deal('Undo');">
    <input type=button value="重做" onclick="deal('Redo');">
    <input type=button value="删除" onclick="deal('Delete');">
    <input type=button value="剪切" onclick="deal('Cut');">
    <input type=button value="拷贝" onclick="deal('Copy');">
    <input type=button value="粘贴" onclick="deal('Paste');">
    <br>
    <input type=button value="刷新" onclick="deal('refresh');">
    <input type=button value="停止" onclick="deal('stop');">
    <input type=button value="另保存" onclick="deal('SaveAs');">
    <br>
    <input type="button" value="设计" onclick="changemode(1);">
    <input type="button" value="HTML" onclick="changemode(2);">
   </div>
  </center>
 
  <form name="form1">
   <input type="button" value="取文本,用来存到数据库里面" onclick='getcontent();'>
   <br>
   <textarea name="mytext" cols="50" rows="10"></textarea>
  </form>
 
<script language = "javaScript" type="text/javascript">
 //设置全局变量IframeID,设置他可编辑
 var IframeID=document.getElementById("wood_content").contentWindow;
 IframeID.document.designMode="On"
 //设置html编辑器当前是在设置模式下
 var mode=1;
 
 function deal(s)
 {
  //各种操作
  switch(s)
  {
   case "Bold":
        IframeID.document.execCommand("Bold"); IframeID.focus();
        break;
   case "Italic":
        IframeID.document.execCommand("Italic"); IframeID.focus();
        break;
   case "Underline":
        IframeID.document.execCommand("Underline"); IframeID.focus();
        break;
   case "FontName":
        IframeID.document.execCommand('FontName',false,'黑体');
        break;
   case "superscript":
        IframeID.document.execCommand("superscript"); IframeID.focus();
        break;
   case "subscript":
        IframeID.document.execCommand("subscript"); IframeID.focus();
        break;
   case "FontSize":
        IframeID.document.execCommand('FontSize',false,9);
        break;
   case "justifyleft":
        IframeID.document.execCommand("justifyleft"); IframeID.focus();
        break;
   case "justifycenter":
        IframeID.document.execCommand("justifycenter"); IframeID.focus();
        break;
   case "justifyright":
        IframeID.document.execCommand("justifyright"); IframeID.focus();
        break;
   case "insertorderedlist":
        IframeID.document.execCommand("insertorderedlist"); IframeID.focus();
        break;
   case "insertunorderedlist":
        IframeID.document.execCommand("insertunorderedlist"); IframeID.focus();
        break;
   case "ForeColor":
        IframeID.document.execCommand('ForeColor',false,'#ff0000');
        break;
   case "Undo":
        IframeID.document.execCommand('Undo');
        break;
   case "Redo":
        IframeID.document.execCommand('Redo');
        break;
   case "Delete":
        IframeID.document.execCommand('Delete');
        break;
   case "Cut":
        IframeID.document.execCommand('Cut');
        break;
   case "Copy":
        IframeID.document.execCommand('Copy');
        break;
   case "Paste":
        IframeID.document.execCommand('Paste');
        break;
   case "refresh":
        IframeID.document.execCommand('refresh',false,0);
        break;
   case "stop":
        IframeID.document.execCommand('stop');
        break;
   case "SaveAs":
        IframeID.document.execCommand('SaveAs');
        break;
  }
 }
 
 function changemode(i)
 {
  //改变模式,i==1:设计模式;i==2:html模式
  if(i==1)
  {
   if(mode!=1)
   {
    IframeID.document.body.innerHTML=IframeID.document.body.innerText;
    mode=1;
   }
  }
  else
  {
   if(mode!=2)
   {
    IframeID.document.body.innerText=IframeID.document.body.innerHTML;
    mode=2;
   }
  }
 }
 
 function getcontent()
 {
  //取内容用来存到数据库里面
  if(mode==1)
  {
   form1.mytext.value="/IframeID.document.body.innerHTML;
  }
  else
  {
   form1.mytext.value=IframeID.document.body.innerText;
  }
 }
</script>

 </body>
</html>

发表评论:

Powered by Oblog.