如何快速實(shí)現(xiàn)HTML編輯器.NET組件
--------------------------------------------------------------------------------
前言
最近由于工作的需要做了一個HTML編輯器，因為時間比較倉促，做得還很不完善，但是在一次調(diào)試的過程中偶然發(fā)現(xiàn)了一個相當(dāng)取巧的方法，可以讓你在幾分鐘內(nèi)實(shí)現(xiàn)一個HTML編輯器，希望寫出來會對大家有一些借鑒的意義。
--------------------------------------------------------------------------------
摘要
現(xiàn)在的HTML編輯器主要還是使用JScript技術(shù)，MS在這方面有相當(dāng)完備的支持（比如對一段文字設(shè)置加粗只需document.execCommand(‘bold‘)），本文主要向大家介紹怎樣實(shí)現(xiàn)一個HTML編輯器組件（但不會對實(shí)現(xiàn)的細(xì)節(jié)進(jìn)行過多的描述，具體的JS技術(shù)可以查詢《JScript 語言參考》）以及怎樣實(shí)現(xiàn)一個.NET組件。
--------------------------------------------------------------------------------
目錄
得到“素材”
封裝成ASP.NET組件
添加插件
總結(jié)
關(guān)于作者
相關(guān)連接
--------------------------------------------------------------------------------
得到“素材”
首先我們需要得到一個HTML編輯器的原始代碼，網(wǎng)上有不少這類的編輯器，如大名鼎鼎的RichTextBox，DOTNET中華網(wǎng)的DotNetTextBox等等，為了避免版權(quán)糾紛，以我所做得為例（暫名：UltraTextBox）：在編輯器工具欄的空白地方點(diǎn)擊鼠標(biāo)右鍵－－>查看源代碼，如圖所示。
把代碼拷貝出來保存成一個.htm文件就可以看到效果，是不是感覺很簡單的就作了一半？：）
為了以后講解方面我們把它保存為editor.aspx文件，在這里注意刪除掉__VIEWSTATE一段。
然后把相應(yīng)的圖標(biāo)，CSS文件等保存在相應(yīng)的位置，否則你的界面會很難看，當(dāng)然你也可以根據(jù)需要自己來做圖標(biāo)。
好了，準(zhǔn)備工作基本做完，下面是講怎樣把它封裝為.NET組件，方便你在工程中使用。
--------------------------------------------------------------------------------
封裝成ASP.NET組件
首先在VS.NET環(huán)境里生成一個UltraTextBoxV1組件（也可以稱為自定義控件，我習(xí)慣稱為組件）項目，
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
//設(shè)置該組件的標(biāo)記前綴
[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();
//聲明一個代理用于處理值被改變的事件，當(dāng)組件的值更改時發(fā)生ValueChanged事件
public event EventHandler ValueChanged
{
add
{
Events.AddHandler(ValueChangedEvent, value);
}
remove
{
Events.RemoveHandler(ValueChangedEvent, value) ;
}
}
//觸發(fā)值被改變事件的方法
protected virtual void OnValueChanged(EventArgs e)
{
if( Events != null )
{
EventHandler oEventHandler = ( EventHandler )Events[ValueChangedEvent] ;
if (oEventHandler != null) oEventHandler(this, e);
}
}
//處理回發(fā)數(shù)據(jù)
bool IPostBackDataHandler.LoadPostData( string postDataKey, System.Collections.Specialized.NameValueCollection postCollection )
{
if ( postCollection[postDataKey] != Text )
{
Text = postCollection[postDataKey];
return true;
}
return false;
}
//告訴應(yīng)用程序該組件的狀態(tài)已更改
void IPostBackDataHandler.RaisePostDataChangedEvent()
{
OnValueChanged( EventArgs.Empty );
}
//我們對一個編輯器主要需要實(shí)現(xiàn)下面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結(jié)合起來，這里使用的是iframe技術(shù)：
//覆蓋Render方法，運(yùn)行時輸出：
protected override void Render(HtmlTextWriter output)
{
System.Web.HttpBrowserCapabilities oBrowser = Page.Request.Browser ;
//對應(yīng)的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\" onload=\"javascipt:setTimeout(‘{5}.HtmlEdit.document.body.innerHTML = document.getElementById(\\‘{4}
\\‘).value‘,1000);\" onblur=\"{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) ) ;
}
}
}
//接下來給該組件實(shí)現(xiàn)一個設(shè)計時的界面：
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拷貝你的項目文件夾下，在工具欄－－>組件里添加它，你就可以直接拖放進(jìn)你的頁面，在你的工程中使用。
--------------------------------------------------------------------------------
添加插件
這里舉兩個例子來說明怎樣給該編輯器添加插件：
如果你要給編輯器添加一些功能，如上傳圖片，插入標(biāo)簽等，則首先應(yīng)該給它添加一個圖標(biāo)：
<div class="Btn" TITLE="上傳圖片" LANGUAGE="javascript" onclick="UTB_InsertImg()">
<img class="Ico" src="..\images\img.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="插入EXCEL表格" LANGUAGE="javascript" onclick="UTB_InsertExcel()">
<img class="Ico" src="..\images\insertexcel.gif" WIDTH="16" HEIGHT="16">
</div>
然后在JScript代碼里添加UTB_InsertImg()，UTB_InsertExcel()的實(shí)現(xiàn)：
function UTB_InsertImg()
{
//只能在編輯模式下使用
if ( ! UTB_validateMode() )
return;
HtmlEdit.focus();
//在當(dāng)前光標(biāo)處創(chuàng)建一個區(qū)域用于插入圖片
var range = HtmlEdit.document.selection.createRange();
//用模式對話框打開上傳頁面，把返回值插入到編輯器中
var arr = showModalDialog(""uploadface.aspx"", """", ""dialogWidth:430px;dialogHeight:280px;help:0;status:0"");
if (arr != null)
{
//得到的返回值應(yīng)該是形如：<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();
//在這里其實(shí)就是插入一個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=‘<html xmlns:x="urn:schemas-microsoft-com:office:excel"xmlns="http://www.w3.org/TR/REC-html40"><head><style type="text/css"><!--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;}--></style></head><body><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:OWCVersion>9.0.0.2710</x:OWCVersion><x:Label Style=‘border-top:solid .5pt silver;border-left:solid .5pt silver;border-right:solid .5pt silver;border-bottom:solid .5pt silver‘><x:Caption>Microsoft Office Spreadsheet</x:Caption> </x:Label><x:Name>Sheet1</x:Name><x:WorksheetOptions><x:Selected/><x:Height>7620</x:Height>""+
""<x:Width>15240</x:Width><x:TopRowVisible>0</x:TopRowVisible><x:LeftColumnVisible>0</x:LeftColumnVisible> <x:ProtectContents>False</x:ProtectContents> <x:DefaultRowHeight>210</x:DefaultRowHeight> <x:StandardWidth>2389</x:StandardWidth> </x:WorksheetOptions> </x:ExcelWorksheet></x:ExcelWorksheets> <x:MaxHeight>80%</x:MaxHeight><x:MaxWidth>80%</x:MaxWidth></x:ExcelWorkbook></xml><![endif]--><table class=wc4590F88 x:str><col width="56"><tr height="14"><td></td></tr></table></body></html>‘> <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();
}
關(guān)于怎樣實(shí)現(xiàn)上傳圖片在這里就不多講，CSDN上這類帖子太多了。只是要注意一點(diǎn)，因為使用的是模式對話框，所以在該頁面不能有回發(fā)事件，操作最好在iframe里做。
--------------------------------------------------------------------------------
總結(jié)
謝謝你能看到這里，至此一個簡單的HTML編輯器就制作完成了，本文主要講述了如何得到一個HTML編輯器的代碼，如何把它封裝成一個.NET組件以及通過兩個列子講解了給它添加插件的方法。從上面的步湊你可以看出制作一個HTML編輯器其實(shí)很簡單，雖然借鑒了一些別人的代碼，但如果你仔細(xì)分析一下那些JS腳本，你就會豁然開朗的，如果你有更好的想法希望能告訴我。
--------------------------------------------------------------------------------
關(guān)于作者
作者：袁劍（gOODiDEA）
電子郵件：goodideas@21cn.com
--------------------------------------------------------------------------------
相關(guān)連接
htpp://
