一个简单的利用微软ajax技术开发的HTMLEditer
没啥好写的，都麻木了。就当留个记号吧
CS
代码
protected string tbEditText;
protected string EditText;
// 到时直接取Text就可以了.记得在aspx页面加上 validateRequest=false。不然会因为用了HTML代码而出错
public string Text
{
get
{
string oEditText = HttpUtility.HtmlDecode(Request.Params["tbEditTextName"]);
return oEditText;
}
set
{
EditText = value;
tbEditText = HttpUtility.HtmlEncode(value);
}
}
private void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
EditText = HttpUtility.HtmlDecode(Request.Params["tbEditTextName"]);
tbEditText = HttpUtility.HtmlEncode(Request.Params["tbEditTextName"]);
ScriptManager.RegisterStartupScript(ThtmlEditorUpdatePanel, ThtmlEditorUpdatePanel.GetType(), "HtmlEditor", Resource.AjaxScript.THTMLEditorScript , false);
}
}
protected string EditText;
// 到时直接取Text就可以了.记得在aspx页面加上 validateRequest=false。不然会因为用了HTML代码而出错
public string Text
{
get
{
string oEditText = HttpUtility.HtmlDecode(Request.Params["tbEditTextName"]);
return oEditText;
}
set
{
EditText = value;
tbEditText = HttpUtility.HtmlEncode(value);
}
}
private void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
EditText = HttpUtility.HtmlDecode(Request.Params["tbEditTextName"]);
tbEditText = HttpUtility.HtmlEncode(Request.Params["tbEditTextName"]);
ScriptManager.RegisterStartupScript(ThtmlEditorUpdatePanel, ThtmlEditorUpdatePanel.GetType(), "HtmlEditor", Resource.AjaxScript.THTMLEditorScript , false);
}
}
Html
代码
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="THTMLEditor.ascx.cs"
Inherits="WebPages.UserControl.THTMLEditor" %>
<STYLE type="text/css"> TABLE#tblCoolbar { BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: buttonhighlight 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: buttonhighlight 1px solid; COLOR: menutext; PADDING-TOP: 1px; BORDER-BOTTOM: buttonshadow 1px solid; BACKGROUND-COLOR: buttonface }
.cbtn { BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-BOTTOM: buttonface 1px solid; HEIGHT: 18px }
.txtbtn { FONT-SIZE: 70%; COLOR: menutext; FONT-FAMILY: tahoma }
</STYLE>
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>
<asp:UpdatePanel ID="ThtmlEditorUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table id="tblCoolbar" height="100%" cellspacing="0" cellpadding="0" width="100%">
<tr valign="middle">
<td class="Normal" colspan="16">
<select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>段落样式</option>
<option value="Normal">正文</option>
<option value="<h1>">标题 1</option>
<option value="<h2>">标题 2</option>
<option value="<h3>">标题 3</option>
<option value="<h4>">标题 4</option>
<option value="<h5>">标题 5</option>
<option value="<h6>">标题 6</option>
<option value="<pre>">带格式的</option>
<option value="<address>">地址</option>
</select>
<select onchange="cmdExec('fontname',this[this.selectedIndex].value);">
<option selected>字体</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Garamond">Garamond</option>
<option value="Georgia">Georgia</option>
<option value="System">System</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
<option value="宋体">宋体</option>
<option value="幼圆">幼圆</option>
<option value="楷体_GB2312">楷体_GB2312</option>
<option value="仿宋_GB2312">仿宋_GB2312</option>
<option value="黑体">黑体</option>
<option value="隶书">隶书</option>
</select>
<select onchange="cmdExec('fontsize',this[this.selectedIndex].value);">
<option selected>字号</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="8">9</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
<input onclick="setMode(this.checked)" type="checkbox"><font style="font-size: 8pt"
size="1"> HTML模式</font>
</td>
</tr>
<tr>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('cut')" onmouseout="button_out(this);">
<img alt="剪切" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Cut.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('copy')" onmouseout="button_out(this);">
<img alt="复制" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Copy.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('paste')" onmouseout="button_out(this);">
<img alt="粘贴" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Paste.gif" align="absMiddle" vspace="1">
</div>
</td>
<!--
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="unDo()" onmouseout="button_out(this);"><IMG alt="撤消" hspace="1" src="HTMLEdit/undo.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="reDo()" onmouseout="button_out(this);"><IMG alt="重做" hspace="1" src="HTMLEdit/redo.gif" align="absMiddle" vspace="1">
</div>
</td>
-->
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('bold')" onmouseout="button_out(this);">
<img alt="粗体" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Bold.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('italic')" onmouseout="button_out(this);">
<img alt="斜体" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Italic.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('underline')" onmouseout="button_out(this);">
<img alt="下划线" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Under.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('justifyleft')" onmouseout="button_out(this);">
<img alt="左对齐" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Left.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('justifycenter')" onmouseout="button_out(this);">
<img alt="居中" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Center.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('justifyright')" onmouseout="button_out(this);">
<img alt="右对齐" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Right.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('insertorderedlist')" onmouseout="button_out(this);">
<img alt="编号" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/numlist.GIF" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('insertunorderedlist')" onmouseout="button_out(this);">
<img alt="项目符号" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/bullist.GIF" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('outdent')" onmouseout="button_out(this);">
<img alt="减少缩进量" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/deindent.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('indent')" onmouseout="button_out(this);">
<img alt="增加缩进量" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/inindent.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="foreColor()" onmouseout="button_out(this);">
<img alt="设置前景色" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/fgcolor.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="backColor()" onmouseout="button_out(this);">
<img alt="设置背景色" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/backcolor.gif" align="absMiddle" vspace="1">
</div>
</td>
<td style="width: 1px">
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('createLink')" onmouseout="button_out(this);">
<img alt="插入超链接" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Link.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertImage()" onmouseout="button_out(this);">
<img alt="插入图片" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Image.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertRuler()" onmouseout="button_out(this);">
<img alt="插入水平线" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/HR.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertDate()" onmouseout="button_out(this);">
<img alt="插入日期" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Date.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertTime()" onmouseout="button_out(this);">
<img alt="插入时间" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Time.gif" align="absMiddle" vspace="1">
</div>
</td>
</tr>
<tr>
<td class="Normal" colspan="22">
<input id="tbEditTextId" type="hidden" value="<%=tbEditText%>" name="tbEditTextName">
</td>
</tr>
<tr>
<td colspan="22" height="100%">
<div id="idContent" onkeyup="EditTextCopy();" contenteditable="true" style="border-right: 1px ridge;
border-top: 1px ridge; border-left: 1px ridge; border-bottom: 1px ridge; height: 100%;
background-color: white" width="100%">
<%=EditText%>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Inherits="WebPages.UserControl.THTMLEditor" %>
<STYLE type="text/css"> TABLE#tblCoolbar { BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: buttonhighlight 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: buttonhighlight 1px solid; COLOR: menutext; PADDING-TOP: 1px; BORDER-BOTTOM: buttonshadow 1px solid; BACKGROUND-COLOR: buttonface }
.cbtn { BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-BOTTOM: buttonface 1px solid; HEIGHT: 18px }
.txtbtn { FONT-SIZE: 70%; COLOR: menutext; FONT-FAMILY: tahoma }
</STYLE>
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>
<asp:UpdatePanel ID="ThtmlEditorUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table id="tblCoolbar" height="100%" cellspacing="0" cellpadding="0" width="100%">
<tr valign="middle">
<td class="Normal" colspan="16">
<select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>段落样式</option>
<option value="Normal">正文</option>
<option value="<h1>">标题 1</option>
<option value="<h2>">标题 2</option>
<option value="<h3>">标题 3</option>
<option value="<h4>">标题 4</option>
<option value="<h5>">标题 5</option>
<option value="<h6>">标题 6</option>
<option value="<pre>">带格式的</option>
<option value="<address>">地址</option>
</select>
<select onchange="cmdExec('fontname',this[this.selectedIndex].value);">
<option selected>字体</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Garamond">Garamond</option>
<option value="Georgia">Georgia</option>
<option value="System">System</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
<option value="宋体">宋体</option>
<option value="幼圆">幼圆</option>
<option value="楷体_GB2312">楷体_GB2312</option>
<option value="仿宋_GB2312">仿宋_GB2312</option>
<option value="黑体">黑体</option>
<option value="隶书">隶书</option>
</select>
<select onchange="cmdExec('fontsize',this[this.selectedIndex].value);">
<option selected>字号</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="8">9</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
<input onclick="setMode(this.checked)" type="checkbox"><font style="font-size: 8pt"
size="1"> HTML模式</font>
</td>
</tr>
<tr>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('cut')" onmouseout="button_out(this);">
<img alt="剪切" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Cut.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('copy')" onmouseout="button_out(this);">
<img alt="复制" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Copy.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('paste')" onmouseout="button_out(this);">
<img alt="粘贴" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Paste.gif" align="absMiddle" vspace="1">
</div>
</td>
<!--
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="unDo()" onmouseout="button_out(this);"><IMG alt="撤消" hspace="1" src="HTMLEdit/undo.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="reDo()" onmouseout="button_out(this);"><IMG alt="重做" hspace="1" src="HTMLEdit/redo.gif" align="absMiddle" vspace="1">
</div>
</td>
-->
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('bold')" onmouseout="button_out(this);">
<img alt="粗体" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Bold.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('italic')" onmouseout="button_out(this);">
<img alt="斜体" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Italic.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('underline')" onmouseout="button_out(this);">
<img alt="下划线" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Under.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('justifyleft')" onmouseout="button_out(this);">
<img alt="左对齐" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Left.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('justifycenter')" onmouseout="button_out(this);">
<img alt="居中" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Center.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('justifyright')" onmouseout="button_out(this);">
<img alt="右对齐" hspace="1" src="http://www.cnblogs.com/UserControl/HTMLEdit/Right.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('insertorderedlist')" onmouseout="button_out(this);">
<img alt="编号" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/numlist.GIF" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('insertunorderedlist')" onmouseout="button_out(this);">
<img alt="项目符号" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/bullist.GIF" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('outdent')" onmouseout="button_out(this);">
<img alt="减少缩进量" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/deindent.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('indent')" onmouseout="button_out(this);">
<img alt="增加缩进量" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/inindent.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="foreColor()" onmouseout="button_out(this);">
<img alt="设置前景色" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/fgcolor.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="backColor()" onmouseout="button_out(this);">
<img alt="设置背景色" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/backcolor.gif" align="absMiddle" vspace="1">
</div>
</td>
<td style="width: 1px">
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="cmdExec('createLink')" onmouseout="button_out(this);">
<img alt="插入超链接" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Link.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertImage()" onmouseout="button_out(this);">
<img alt="插入图片" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Image.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertRuler()" onmouseout="button_out(this);">
<img alt="插入水平线" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/HR.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertDate()" onmouseout="button_out(this);">
<img alt="插入日期" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Date.gif" align="absMiddle" vspace="1">
</div>
</td>
<td>
<div onmouseup="button_up(this);" class="cbtn" onmousedown="button_down(this);" onmouseover="button_over(this);"
onclick="insertTime()" onmouseout="button_out(this);">
<img alt="插入时间" hspace="2" src="http://www.cnblogs.com/UserControl/HTMLEdit/Time.gif" align="absMiddle" vspace="1">
</div>
</td>
</tr>
<tr>
<td class="Normal" colspan="22">
<input id="tbEditTextId" type="hidden" value="<%=tbEditText%>" name="tbEditTextName">
</td>
</tr>
<tr>
<td colspan="22" height="100%">
<div id="idContent" onkeyup="EditTextCopy();" contenteditable="true" style="border-right: 1px ridge;
border-top: 1px ridge; border-left: 1px ridge; border-bottom: 1px ridge; height: 100%;
background-color: white" width="100%">
<%=EditText%>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
javaScript
代码
代码
<script language="jscript">
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~按钮风格，颜色选择~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function button_over(eButton)
{
eButton.style.backgroundColor ="#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_out(eButton)
{
eButton.style.backgroundColor = "threedface";
eButton.style.borderColor = "threedface";
}
function button_down(eButton)
{
eButton.style.backgroundColor = "#8494B5";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_up(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
eButton = null;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var isHTMLMode=false
var bShow = false
function cmdExec(cmd,opt)
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus()
idContent.document.execCommand(cmd,bShow,opt);
bShow=false;
EditTextCopy();
}
function EditTextCopy()
{
document.body.all("tbEditTextName").value = idContent.innerHTML;
}
function setMode(bMode)
{
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode){sTmp=idContent.innerHTML;idContent.innerText=sTmp;}
else {sTmp=idContent.innerText;idContent.innerHTML=sTmp;};
}
function createLink()
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
cmdExec("CreateLink");
}
function insertImage()
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
bShow=true;
cmdExec("InsertImage");
}
function insertRuler()
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
cmdExec("InsertHorizontalRule","");
}
function foreColor()
{
//var arr = showModalDialog("HTMLEdit/selcolor.htm","","font-family:Verdana; font-size:10; dialogWidth:40em; dialogHeight:50em" );
var arr = showModalDialog("http://www.cnblogs.com/UserControl/HTMLEdit/bgcolor.aspx","","font-family:Verdana; font-size:10; dialogWidth:40em; dialogHeight:50em" );
if (arr != null) cmdExec("ForeColor",arr);
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function backColor()
{
var arr = showModalDialog("http://www.cnblogs.com/UserControl/HTMLEdit/bgcolor.aspx","","font-family:Verdana; font-size:10; dialogWidth:40em; dialogHeight:50em" );
if (arr != null) cmdExec("BackColor",arr);
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~没办法了。好像这个结构不太可能实现undo,redo功能了。有时间可以换成2个iframe翻来翻去的那种做法~~~~~~~~~~~~~~~
function unDo()
{
ftbBody_editor.focus();//只有iframe才支持这个功能,这里只是个层
ftbBody_editor.document.execCommand('undo','',null);
alert("undo");
}
function reDo()
{
ftbBody_editor.focus();//只有iframe才支持这个功能,这里只是个层
ftbBody_editor.document.execCommand('redo','',null);
alert("redo");
}
//计算字数
function FTB_WordCount() {//统计字数
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus();
var d = new Date();
sel = idContent.document.selection.createRange();
sel.pasteHTML(d.toLocaleTimeString());
}
//插入时间
function insertTime() {
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus();
var d = new Date();
sel = idContent.document.selection.createRange();
sel.pasteHTML(d.toLocaleTimeString());
EditTextCopy();
}
//插入日期
function insertDate() {
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus();
var d = new Date();
sel = idContent.document.selection.createRange();
sel.pasteHTML(d.toLocaleDateString());
EditTextCopy();
}
</script>
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~按钮风格，颜色选择~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function button_over(eButton)
{
eButton.style.backgroundColor ="#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_out(eButton)
{
eButton.style.backgroundColor = "threedface";
eButton.style.borderColor = "threedface";
}
function button_down(eButton)
{
eButton.style.backgroundColor = "#8494B5";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_up(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
eButton = null;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var isHTMLMode=false
var bShow = false
function cmdExec(cmd,opt)
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus()
idContent.document.execCommand(cmd,bShow,opt);
bShow=false;
EditTextCopy();
}
function EditTextCopy()
{
document.body.all("tbEditTextName").value = idContent.innerHTML;
}
function setMode(bMode)
{
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode){sTmp=idContent.innerHTML;idContent.innerText=sTmp;}
else {sTmp=idContent.innerText;idContent.innerHTML=sTmp;};
}
function createLink()
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
cmdExec("CreateLink");
}
function insertImage()
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
bShow=true;
cmdExec("InsertImage");
}
function insertRuler()
{
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
cmdExec("InsertHorizontalRule","");
}
function foreColor()
{
//var arr = showModalDialog("HTMLEdit/selcolor.htm","","font-family:Verdana; font-size:10; dialogWidth:40em; dialogHeight:50em" );
var arr = showModalDialog("http://www.cnblogs.com/UserControl/HTMLEdit/bgcolor.aspx","","font-family:Verdana; font-size:10; dialogWidth:40em; dialogHeight:50em" );
if (arr != null) cmdExec("ForeColor",arr);
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function backColor()
{
var arr = showModalDialog("http://www.cnblogs.com/UserControl/HTMLEdit/bgcolor.aspx","","font-family:Verdana; font-size:10; dialogWidth:40em; dialogHeight:50em" );
if (arr != null) cmdExec("BackColor",arr);
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~没办法了。好像这个结构不太可能实现undo,redo功能了。有时间可以换成2个iframe翻来翻去的那种做法~~~~~~~~~~~~~~~
function unDo()
{
ftbBody_editor.focus();//只有iframe才支持这个功能,这里只是个层
ftbBody_editor.document.execCommand('undo','',null);
alert("undo");
}
function reDo()
{
ftbBody_editor.focus();//只有iframe才支持这个功能,这里只是个层
ftbBody_editor.document.execCommand('redo','',null);
alert("redo");
}
//计算字数
function FTB_WordCount() {//统计字数
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus();
var d = new Date();
sel = idContent.document.selection.createRange();
sel.pasteHTML(d.toLocaleTimeString());
}
//插入时间
function insertTime() {
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus();
var d = new Date();
sel = idContent.document.selection.createRange();
sel.pasteHTML(d.toLocaleTimeString());
EditTextCopy();
}
//插入日期
function insertDate() {
if (isHTMLMode){alert("请先退出'HTML模式'");return;}
idContent.focus();
var d = new Date();
sel = idContent.document.selection.createRange();
sel.pasteHTML(d.toLocaleDateString());
EditTextCopy();
}
</script>
