ASP.NET Community Starter Kit 的一个可视编辑器
可视编辑器WYSIWYG(what you see is what you get)是比较流行的网页文本编结方式。目前广泛使用的是FreeTextBox，他是一个控件功能强大，例如cnblogs和aspcool就采用的这种方式，下面是它的截面图
它的优点是功能强大，缺点是：代码封闭，不容易学习。
在ASP.NET Community Starter Kit里，微软提供了一个简单的自定义控件HtmlTextBox，下面是他的运行效果截面图
读者可以到下面地址下载本例子的源代码 .
HtmlEditorTest.zip
该源代码已经从ASP.NET Community Starter Kit分离出来。下载后，读者可以直接使用该代码里的WCHtmlEditor.dll文件，也可以编译该项目，重生成该文件
下面步骤介绍了如何在自己代码里引用该控件：
（1）建立一个ASP.NET Web应用程序
（2）在“解决方案资源管理器”里，展开“引用”，单击鼠标右键，选择“添加”，然后定外到WCHtmlEditor.dll文件，添加后，你的项目显示应该类似如下 
（3）采用如下的注册方式：
（4）然后就可以用类型代码使用它了
<cc1:HtmlTextBox id="HtmlTextBox1" runat="server" Height="500px" Width="500px"></cc1:HtmlTextBox>
除此以外，你还可以把该控件，集成到Visual Studio.NET的工具箱里，在工具箱上，单击右键，选择“添加/删除部件”，定位到WCHtmlEditor.dll文件，具体使用请读者参考相关资料。
下面的内容，将简单介绍该控件的原理
HtmlTextBox控件首先是从WebControl类派生，同时实现了InameingContainer和IPostBackDatahandler接口。InameingContainer实现的是命名空间的容器控件接口，之所有还要实现IPostBackDatahandler接口是因为该接口实现了一个HTTP请求的往返过程，也就是数据回传。
（1）读者可以在 HtmlTextBox.htc 里，看到这些javascript代码
<script language="JavaScript">
function AddEmoticon() {
var emoticon = _emotePopup.document.parentWindow.event.srcElement;
editorDiv.focus();
sel = editorDiv.document.selection.createRange();
sel.pasteHTML('<img unselectable="on" src="' + emoticon.src + '" />');
_emotePopup.hide();
}
function PasteCode() {
editorDiv.focus();
document.execCommand('FormatBlock', false, 'Formatted');
document.execCommand('Paste');
}
// don't allow pasting html
function preventPaste() {
var clipData = clipboardData.getData("Text");
if (clipData == 'null') {
clipboardData.clearData();
return;
}
var oTextArea = document.createElement("TEXTAREA");
oTextArea.value = clipData;
var objText = oTextArea.createTextRange();
objText.execCommand("RemoveFormat");
objText.execCommand("Unlink");
objText.execCommand("Copy");
}
function OnClickShowHtmlCheckBox(checkBoxElement) {
if (viewHtmlCheckBox.checked == true) {
editorTextArea.value = editorDiv.innerHTML;
toolbarTable.style.display = 'none';
editorDiv.style.display = 'none';
editorTextArea.style.display = '';
editorTextArea.focus();
} else {
editorDiv.innerHTML = editorTextArea.value;
toolbarTable.style.display = '';
editorTextArea.style.display = 'none';
editorDiv.style.display = '';
editorDiv.focus();
}
}
function CallEmoticonDlg(toolButton) {
_emotePopup.show(30, 30, 100, 100, toolButton);
}
</script>
这里读者可以看到插入表情的代码，代码中用红颜色已经标识出来。所有这些表情标签必须对应实际图片，这些图片读者可以在代码的emoticons文件夹里找到。
读者同时可以查看颜色对话框的原理，这里就不再说明了
（2）下面给出了核心代码，也就是服务器处理的原理
/// <summary>
/// This control is used to display html content
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:HtmlLabel runat=server></{0}:HtmlLabel>")]
public class HtmlLabel : System.Web.UI.WebControls.WebControl
{
[Bindable(true),
Category("Appearance"),
DefaultValue("")]
public string Text
{
set
{
this.ViewState["text"] = value;
}
}
/// <summary>
/// Render this control to the output parameter specified.
/// </summary>
/// <param name="output"> The HTML writer to write out to </param>
protected override void Render(HtmlTextWriter output)
{
StringBuilder oBuilder = new StringBuilder();
if(this.ViewState["text"]!=null)
{
string strText=(string)this.ViewState["text"];
if(strText!=null)
{
string strCss=this.CssClass;
string[] fString ={this.CssClass,this.Width.ToString(),strText};
oBuilder.AppendFormat("<table class=\"{0}\" width=\"{1}\"><tr><td>{2}</td></tr></table>", fString );
}
}
string strTemp=oBuilder.ToString();
output.Write(oBuilder.ToString());
}
}
