当前位置：Gxlcms > JavaScript > 一个的简易文本编辑器源码

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

时间：2021-07-01 10:21:17 帮助过：14人阅读

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

<HTML>

<HEAD>

</HEAD>

<BODY>

<tr>

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

onmouseout="On_Mouseout(e_bold);">

</td>

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

onmouseout="On_Mouseout(e_italic);">

</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

//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需刷新才能执行]

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

人气教程排行