作者：未知?? 請作者速與本人聯系


得到“素材” 首先我們需要得到一個HTML編輯器的原始代碼，網上有不少這類的編輯器，如大名鼎鼎的RichTextBox，為了避免版權糾紛，以我所做得為例（暫名：UltraTextBox）：在編輯器工具欄的空白地方點擊鼠標右鍵－－>查看源代碼，如圖所示。 把代碼拷貝出來保存成一個.htm文件就可以看到效果，是不是感覺很簡單的就作了一半？：） 為了以后講解方面我們把它保存為editor.aspx文件，在這里注意刪除掉__VIEWSTATE一段。 然后把相應的圖標，CSS文件等保存在相應的位置，否則你的界面會很難看，當然你也可以根據需要自己來做圖標。 好了，準備工作基本做完，下面是講怎樣把它封裝為.NET組件，方便你在工程中使用。 -------------------------------------------------------------------------------- 封裝成ASP.NET組件 首先在VS.NET環境里生成一個UltraTextBoxV1組件（也可以稱為自定義控件，我習慣稱為組件）項目，

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 ) ;}}
} 

至此組件部分就基本做完，把它編譯后的Dll拷貝你的項目文件夾下，在工具欄－－>組件里添加它，你就可以直接拖放進你的頁面，在你的工程中使用。 -------------------------------------------------------------------------------- 添加插件 這里舉兩個例子來說明怎樣給該編輯器添加插件： 如果你要給編輯器添加一些功能，如上傳圖片，插入標簽等，則首先應該給它添加一個圖標：

<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();
} 

關于怎樣實現上傳圖片在這里就不多講，CSDN上這類帖子太多了。只是要注意一點，因為使用的是模式對話框，所以在該頁面不能有回發事件，操作最好在iframe里做。 -------------------------------------------------------------------------------- 總結 謝謝你能看到這里，至此一個簡單的HTML編輯器就制作完成了，本文主要講述了如何得到一個HTML編輯器的代碼，如何把它封裝成一個.NET組件以及通過兩個列子講解了給它添加插件的方法。從上面的步湊你可以看出制作一個HTML編輯器其實很簡單，雖然借鑒了一些別人的代碼，但如果你仔細分析一下那些JS腳本，你就會豁然開朗的，如果你有更好的想法希望能告訴我。

總結

以上是生活随笔為你收集整理的如何快速实现HTML编辑器.NET组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。