简易文本编辑器源码

最新推荐文章于 2023-10-31 11:08:20 发布

转载最新推荐文章于 2023-10-31 11:08:20 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hzuIT/articles/751614.html

文章标签：

#javascript #ViewUI

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

<HTML>
<HEAD>
  <TITLE>ubb</TITLE>
</HEAD>
<BODY>
  <FONT face=""></FONT>
  <br>
  <br>
  <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='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='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>

转载于:https://www.cnblogs.com/hzuIT/articles/751614.html