一个的简易文本编辑器源码


答案：一个简易文本编辑器，自己学习的第一个编辑器程序，共享一下，可以学习一下。 


<HTML>  

 <HEAD>  

  <TITLE>ubb</TITLE>  

 </HEAD>  

 <BODY>  

  <FONT face="">  

  
  

  
  

  <table width="300" cellspacing="0" cellpadding="1" border="0" bgcolor="buttonface">  

   <tr>  

    <td  height="20px" width="18px"  onclick='doAction("Bold")' onMouseDown="DoDown(e_bold );" onMouseOver="On_Mouseover(e_bold) ;"  

     onmouseout="On_Mouseout(e_bold);">  

     <img align="absmiddle" id="e_bold" src='http://www.zhaoxi.net/article/bold.gif' width="18px" height="18px" border="0"/>  

    </td>  

    <td height="20px" width="18px" onclick='doAction("Italic")' onMouseDown="DoDown(e_italic);" onMouseOver="On_Mouseover(e_italic) ;"  

     onmouseout="On_Mouseout(e_italic);">  

     <img  align="absmiddle" id="e_italic" src='http://www.zhaoxi.net/article/italic.gif' width="18" height="18" border=0/>  

    </td>  

    <td width="264px">  

    </td>  

   </tr>  

   <tr>  

    <td colspan="3">  

     <iframe id="Editor" name="Editor" border="0" scroll="no" width="300" height="200" style="margin:0px"></iframe>  

    </td>  

   </tr>  

 </table>  

  <script language="javascript">  



//initialize the iframe  

function window.onload()  

{  

  Editor.document.designMode = "On";  

  Editor.document.open() ;  

  Editor.document.write("") ;  

  Editor.document.close();  

  Editor.focus ();  

}  



function On_Mouseover(thisTD)  

{  

thisTD.style.borderLeft = "1px solid buttonhighlight" ;  

thisTD.style.borderRight = "1px solid buttonshadow";  

thisTD.style.borderTop = "1px solid buttonhighlight";  

thisTD.style.borderBottom = "1px solid buttonshadow";  

}  



function On_Mouseout(thisTD)  

{  

thisTD.style.borderLeft = "" ;  

thisTD.style.borderRight = "";  

thisTD.style.borderTop = "";  

thisTD.style.borderBottom = "";  

}  



function DoDown(thisTD)  

{  

thisTD.style .borderLeft = "1px solid buttonshadow";  

thisTD.style .borderRight = "1px solid buttonhighlight";  

thisTD.style .borderTop = "1px solid buttonshadow";  

thisTD.style .borderBottom = "1px solid buttonhighlight";  

thisTD.style .paddingTop = "2px";  

thisTD.style .paddingLeft = "2px";  

thisTD.style .paddingBottom = "0px";  

thisTD.style .paddingRight = "0px";   

}   



function doAction(str)  

{  

var m_objTextRange = Editor.document.selection.createRange();  

m_objTextRange.execCommand(str) ;  

}   





  </script>  

 </BODY>  

</HTML> 


  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：javascript中的location用法简单介绍
下一个：JsEasy简介 JsEasy是什么?与下载
更多图片编程知识: