一個的簡易文本編輯器源碼

2019-11-21 02:14:01

字體：大中小

來源：轉載

供稿：網友

一個簡易文本編輯器，自己學習的第一個編輯器程序，共享一下，可以學習一下。

<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='https://www.jb51.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='https://www.jb51.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的函數重名看其初始化方式

下一篇：網頁屏蔽(左右鍵,代碼等)的非JS方法第1/2頁