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代码

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

}

}



 

posted @ 2005-08-03 15:27  启明星工作室  阅读(1797)  评论(2编辑  收藏  举报