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）采用如下的注册方式：
<%@ Register TagPrefix="cc1" Namespace="WCHtmlEditor" Assembly="WCHtmlEditor" %>
（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代码

var _allowHtml = 'Limited';
var _initBackColor = null;
var _initForeColor = null;
var _emotePopup = window.createPopup();
var _appImagePath;

// assign default styles
element.style.overflow = 'visible';

function get_html() {
if (_allowHtml == 'Full' && viewHtmlCheckBox.checked == true) {
return editorTextArea.value;
} else {
return editorDiv.innerHTML;
}
}

function set_html(data) {
if (_allowHtml == 'Full' && viewHtmlCheckBox.checked == true) {
return editorTextArea.value;
} else {
editorDiv.innerHTML = data;
}
}

function set_allowHtml(data) {
_allowHtml = data;
}

function OnBlurEditorDiv(divElement) {
htmlChangedEvent.fire();
}

function OnBlurEditorTextArea(textAreaElement) {
htmlChangedEvent.fire();
}

function AddToolbars() {
var toolRow;
var toolCell;

// Create the formatting row
toolRow = toolbarTable.insertRow(0);

// Add Bold option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('Bold.gif', 'DoFormat(\'Bold\')', 'bold' );

// Add Italic option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('Italic.gif', 'DoFormat(\'Italic\')', 'italic' );

// Add Underline option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('Underline.gif', 'DoFormat(\'Underline\')', 'underline' );

// Add Divider
toolCell = toolRow.insertCell();
toolCell.innerHTML = dividerToolbarCell();

// Add BulletList option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('bulletlist.gif', 'DoFormat(\'InsertUnorderedList\')', 'bullet list' );

// Add NumberList option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('numberlist.gif', 'DoFormat(\'InsertOrderedList\')', 'number list' );

// Add Divider
toolCell = toolRow.insertCell();
toolCell.innerHTML = dividerToolbarCell();

// Add Link option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('link.gif', 'AddLink()' );

// Add Forecolor option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('forecolor.gif', 'CallForeColorDlg()' );

// Add Backcolor option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('backcolor.gif', 'CallBackColorDlg()' );

// Add Divider
toolCell = toolRow.insertCell();
toolCell.innerHTML = dividerToolbarCell();

// Add Indent option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('Indent.gif', 'DoFormat(\'Indent\')', 'indent' );

// Add Outdent option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('Outdent.gif', 'DoFormat(\'Outdent\')', 'outdent' );

// Add Divider
toolCell = toolRow.insertCell();
toolCell.innerHTML = dividerToolbarCell();

// Left Align option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('LeftAlign.gif', 'DoFormat(\'JustifyLeft\')', 'left align' );

// Center Align option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('CenterAlign.gif', 'DoFormat(\'JustifyCenter\')', 'center align' );

// Right Align option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('RightAlign.gif', 'DoFormat(\'JustifyRight\')', 'right align' );

// Add Divider
toolCell = toolRow.insertCell();
toolCell.innerHTML = dividerToolbarCell();

// Emoticons option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('Smile.gif', 'CallEmoticonDlg(this)', 'add emoticon' );

// Paste code option
toolCell = toolRow.insertCell();
toolCell.innerHTML = formatToolbarCell('Code.gif', 'PasteCode()', 'paste code' );

}

function formatToolbarCell(image, clickAction, description) {
return '

';
}

function dividerToolbarCell() {
return '

';
}

function DoFormat(action) {
editorDiv.focus();
document.execCommand(action);

}

function AddLink() {
editorDiv.focus();
document.execCommand('CreateLink', true, '');
}

// Open the color dialog box for foreground color
function CallForeColorDlg(){
editorDiv.focus();

//if _initForeColor is null, the color dialog box has not yet been called
if (_initForeColor == null)
var sColor = document.dlgHelper.ChooseColorDlg();
else
//call the dialog box and initialize the color to the color previously chosen
var sColor = document.dlgHelper.ChooseColorDlg(_initForeColor);
//change the return value from a decimal value to a hex value and make sure the value has 6
//digits to represent the RRGGBB schema required by the color table
sColor = sColor.toString(16);
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
document.execCommand('ForeColor', false, sColor);

//set the initialization color to the color chosen
_initForeColor = sColor;
}

// Open the color dialog box for background color
function CallBackColorDlg(){
editorDiv.focus();
//if _initBackColor is null, the color dialog box has not yet been called
if (_initBackColor == null)
var sColor = document.dlgHelper.ChooseColorDlg();
else
//call the dialog box and initialize the color to the color previously chosen
var sColor = document.dlgHelper.ChooseColorDlg(_initBackColor);
//change the return value from a decimal value to a hex value and make sure the value has 6
//digits to represent the RRGGBB schema required by the color table
sColor = sColor.toString(16);
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
document.execCommand('BackColor', false, sColor);

//set the initialization color to the color chosen
_initBackColor = sColor;
}

function OnDocumentReady() {

// set editors width and height
editorDiv.style.width = element.style.width;
editorDiv.style.height = element.style.height;
editorTextArea.style.width = element.style.width;
editorTextArea.style.height = element.style.height;

// display the checkbox when allowHTML is not full
if (_allowHtml == 'Full') {
editorTable.rows(2).style.display = '';
} else {
editorTable.deleteRow(2);
}

// Initialize emoticon popup
var emotePopBody = _emotePopup.document.body;

// format popup
emotePopBody.style.backgroundColor = "lightyellow";
emotePopBody.style.border = "solid black 1px";

// Retrieve values from parent
var _emoticonList = document.parentWindow.emoticonList;
var _appBasePath = document.parentWindow.appBasePath;
var _emoticonPath = _appBasePath + '/images/emoticons/';

// populate emoticon images
for(var i=0;i < _emoticonList.length;i++)
emotePopBody.innerHTML += '

';

emotePopBody.onclick = AddEmoticon;

// Add toolbar options
_appImagePath = _appBasePath + '/images/HtmlTextBox/';
AddToolbars();
}

function AddEmoticon() {
var emoticon = _emotePopup.document.parentWindow.event.srcElement;
editorDiv.focus();
sel = editorDiv.document.selection.createRange();
sel.pasteHTML('

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

// when user depresses button, show as inset
function htmlToolDown() {
window.event.srcElement.style.borderStyle = 'inset';
}

// when user releases button, show as outset
function htmlToolUp() {
window.event.srcElement.style.borderStyle = 'outset';
}

function FormatBlock() {
editorDiv.focus();
var oSource = window.event.srcElement;
document.execCommand("FormatBlock", false, oSource.options[oSource.selectedIndex].value );
}

function FormatTypeFace() {
editorDiv.focus();
var oSource = window.event.srcElement;
document.execCommand("FontName", false, oSource.options[oSource.selectedIndex].value);
}

function FormatTypeSize() {
editorDiv.focus();
var oSource = window.event.srcElement;
document.execCommand("FontSize", false, oSource.options[oSource.selectedIndex].value);
}

<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="http://www.cnblogs.com/mqingqing123/archive/2005/08/03/' + 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());

}

}