如何快速实现HTML编辑器.NET组件

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
//设置该组件的标记前缀
[assembly:TagPrefix("gOODiDEA.UltraTextBoxV1", "UTBV1")]
namespace gOODiDEA.UltraTextBoxV1
{
//添加类声明 
[
DefaultProperty("Text"),
ValidationProperty("Text"),
ToolboxData("<{0}:UltraTextBoxV1 runat=server></{0}:UltraTextBoxV1>"),
ParseChildren(false),
Designer("gOODiDEA.UltraTextBoxV1.UltraTextBoxV1Designer")
]
public class UltraTextBoxV1: System.Web.UI.Control, IPostBackDataHandler
{
private static readonly object ValueChangedEvent = new object();
//声明一个代理用于处理值被改变的事件，当组件的值更改时发生ValueChanged事件 
public event EventHandler ValueChanged
{
add
{
Events.AddHandler(ValueChangedEvent, value);
}
remove
{
Events.RemoveHandler(ValueChangedEvent, value) ;
}
}
//触发值被改变事件的方法
protected virtual void OnValueChanged(EventArgs e)
{
if( Events != null )
{
EventHandler oEventHandler = ( EventHandler )Events[ValueChangedEvent] ;
if (oEventHandler != null) oEventHandler(this, e);
}
}
//处理回发数据 
bool IPostBackDataHandler.LoadPostData( string postDataKey, 
System.Collections.Specialized.NameValueCollection postCollection )
{
if ( postCollection[postDataKey] != Text )
{
Text = postCollection[postDataKey];
return true;
}
return false;
}
//告诉应用程序该组件的状态已更改 
void IPostBackDataHandler.RaisePostDataChangedEvent()
{
OnValueChanged( EventArgs.Empty );
}
//我们对一个编辑器主要需要实现下面4个属性，Text，Width，Height，BasePath。
//Text属性：（从编辑器得到值和把值赋给编辑器）
[Bindable(true),DefaultValue("")] 
public string Text
{
get 
{
object o = ViewState["Text"];
return ( o == null ) ? String.Empty : ( string )o;
}
set
{
ViewState["Text"] = value;
}
}
//Width属性：（编辑器的宽）
[Bindable(true),Category("Appearence"),DefaultValue("100%")] 
public Unit Width
{
get 
{
object o = ViewState["Width"];
return ( o == null ) ? Unit.Parse( "100%" ) : ( Unit )o ;
}
set
{ 
ViewState["Width"] = value ;
}
}
//Height属性：（编辑器的高）
[Bindable(true),Category("Appearence"),DefaultValue("385px")] 
public Unit Height
{
get 
{
object o = ViewState["Height"];
return ( o == null ) ? Unit.Parse( "385px" ) : ( Unit )o ;
}
set
{
ViewState["Height"] = value ;
}
}
//BasePath属性：（第一步保存的editor.aspx的路径以及以后做的插件的路径）
[Bindable(true),DefaultValue("../UltraTextBoxV1Sys/Plug-Ins/")] 
public string BasePath
{
get 
{
object o = ViewState["BasePath"];
return (o == null) ? "../UltraTextBoxV1Sys/Plug-Ins/" : (string)o;
}
set
{
ViewState["BasePath"] = value;
}
} 
//接下来是最重要的怎样把本组件和Editor.aspx结合起来，这里使用的是iframe技术：
//覆盖Render方法，运行时输出：
protected override void Render(HtmlTextWriter output)
{
System.Web.HttpBrowserCapabilities oBrowser = Page.Request.Browser ;
//对应的IE版本必须是5.5或以上的版本 
if (oBrowser.Browser == "IE" && oBrowser.MajorVersion >= 5.5 && oBrowser.Win32)
{
string sLink = BasePath + "Editor.aspx?FieldName=" + UniqueID;
//如果不使用SetTimeout则会提示找不到对象 
output.Write(
"<IFRAME id=/"{5}/" src=/"{0}/" width=/"{1}/" height=/"{2}/" frameborder=/"no/" scrolling=/"no/" 
                οnlοad=/"javascipt:setTimeout('{5}.HtmlEdit.document.body.innerHTML = document.getElementById(//'{4}
//').value',1000);/" οnblur=/"{4}.value = {5}.HtmlEdit.document.body.innerHTML/"></IFRAME>",
sLink, 
Width, 
Height,
Text,
UniqueID,
ID + "_editor"
) ;
//存储编辑器的值 
output.Write(
"<INPUT type=/"hidden/" id=/"{0}/" name=/"{0}/" value=/"{1}/" >",
UniqueID, 
System.Web.HttpUtility.HtmlEncode(Text) ) ;
}
}
} 
//接下来给该组件实现一个设计时的界面：
public class UltraTextBoxV1Designer : System.Web.UI.Design.ControlDesigner
{
public UltraTextBoxV1Designer(){}
public override string GetDesignTimeHtml() 
{
UltraTextBoxV1 oControl = ( UltraTextBoxV1 )Component ;
return String.Format(
"<TABLE width=/"{0}/" height=/"{1}/" bgcolor=/"#f5f5f5/" bordercolor=/"#c7c7c7/" cellpadding=/"0/"
 cellspacing=/"0/" border=/"1/"><TR><TD valign=/"middle/" align=/"center/">UltraTextBox 1.1 - <B>{2}</B></TD></TR></TABLE>",
oControl.Width,
oControl.Height,
oControl.ID ) ;
}
}
} 

<div class="Btn" TITLE="上传图片" LANGUAGE="javascript" οnclick="UTB_InsertImg()">
<img class="Ico" src="../images/img.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="插入EXCEL表格" LANGUAGE="javascript" οnclick="UTB_InsertExcel()">
<img class="Ico" src="../images/insertexcel.gif" WIDTH="16" HEIGHT="16">
</div>
然后在JScript代码里添加UTB_InsertImg()，UTB_InsertExcel()的实现：
function UTB_InsertImg()
{
//只能在编辑模式下使用
if ( ! UTB_validateMode() )
return;
HtmlEdit.focus();
//在当前光标处创建一个区域用于插入图片
var range = HtmlEdit.document.selection.createRange();
//用模式对话框打开上传页面，把返回值插入到编辑器中
var arr = showModalDialog(""uploadface.aspx"", """", ""dialogWidth:430px;dialogHeight:280px;help:0;status:0"");
if (arr != null)
{
//得到的返回值应该是形如：<img src="http://61.139.77.178:8088/gOODiDEA/pic01.jpg">
range.pasteHTML( arr );
}
HtmlEdit.focus();
}
function UTB_InsertExcel()
{
if (!UTB_validateMode())
return;
HtmlEdit.focus();
//在这里其实就是插入一个Microsoft Office Web Components（MSOWC）组件
var range = HtmlEdit.document.selection.createRange();
range.pasteHTML(""<object classid='clsid:0002E510-0000-0000-C000-000000000046' id='Spreadsheet1' 
codebase='file://Bob/software/office2000/msowc.cab' width='100%' height='250'><param name='HTMLURL' value>
<param name='HTMLData' value='&lt;html xmlns:x=&quot;urn:schemas-microsoft-com:office:excel&quot;xmlns=&quot;
http://www.w3.org/TR/REC-html40&quot;&gt;&lt;head&gt;&lt;style type=&quot;text/css&quot;&gt;&lt;
!--tr{mso-height-source:auto;}td{black-space:nowrap;}.wc4590F88{black-space:nowrap;font-family:宋体;
mso-number-format:General;font-size:auto;font-weight:auto;font-style:auto;text-decoration:auto;
mso-background-source:auto;mso-pattern:auto;mso-color-source:auto;text-align:general;vertical-align:bottom;
border-top:none;border-left:none;border-right:none;border-bottom:none;mso-protection:locked;}--&gt;&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;&lt;
x:ExcelWorksheet&gt;&lt;x:OWCVersion&gt;9.0.0.2710&lt;/x:OWCVersion&gt;&lt;x:Label Style='border-top:solid .5pt silver;
border-left:solid .5pt silver;border-right:solid .5pt silver;border-bottom:solid .5pt silver'&gt;&lt;x:Caption&gt;
Microsoft Office Spreadsheet&lt;/x:Caption&gt; &lt;/x:Label&gt;&lt;x:Name&gt;Sheet1&lt;/x:Name&gt;&lt;x:WorksheetOptions&gt;
&lt;x:Selected/&gt;&lt;x:Height&gt;7620&lt;/x:Height&gt;""+
""&lt;x:Width&gt;15240&lt;/x:Width&gt;&lt;x:TopRowVisible&gt;0&lt;/x:TopRowVisible&gt;&lt;x:LeftColumnVisible&gt;0&lt;
/x:LeftColumnVisible&gt; &lt;x:ProtectContents&gt;False&lt;/x:ProtectContents&gt; &lt;x:DefaultRowHeight&gt;210&lt;
/x:DefaultRowHeight&gt; &lt;x:StandardWidth&gt;2389&lt;/x:StandardWidth&gt; &lt;/x:WorksheetOptions&gt; &lt;
/x:ExcelWorksheet&gt;&lt;/x:ExcelWorksheets&gt; &lt;x:MaxHeight&gt;80%&lt;/x:MaxHeight&gt;&lt;x:MaxWidth&gt;
80%&lt;/x:MaxWidth&gt;&lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;![endif]--&gt;&lt;table class=wc4590F88 x:str&gt;
&lt;col width=&quot;56&quot;&gt;&lt;tr height=&quot;14&quot;&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;
/body&gt;&lt;/html&gt;'> <param name='DataType' value='HTMLDATA'> <param name='AutoFit' value='0'>
<param name='DisplayColHeaders' value='-1'><param name='DisplayGridlines' value='-1'><param name='DisplayHorizontalScrollBar' value='-1'>
<param name='DisplayRowHeaders' value='-1'><param name='DisplayTitleBar' value='-1'><param name='DisplayToolbar' value='-1'>
<param name='DisplayVerticalScrollBar' value='-1'> <param name='EnableAutoCalculate' value='-1'> <param name='EnableEvents' value='-1'>
<param name='MoveAfterReturn' value='-1'><param name='MoveAfterReturnDirection' value='0'><param name='RightToLeft' value='0'>
<param name='ViewableRange' value='1:65536'></object>"");
HtmlEdit.focus();
}