教你在线开发ＨＴＭＬ编辑器

：
１，新建一个用户控件：HtmlEdit.ascx
html代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HtmlEdit.ascx.cs" Inherits="Controls_HtmlEdit" %>
<script language="javascript" type="text/javascript" src="Editor/Editor.js"></script>
<script language="javascript" type="text/javascript">
    function CheckForm(){
    if(document.all('edit').style.display=='none')
        {
            CheckFormHtml();
        }    
     document.aspnetForm.<%=this.content.ClientID %>.value = getContent();
    }

    function CheckFormHtml()
    {
     setContent(document.aspnetForm.<%=this.content.ClientID %>.value);
    }
   
    function CheckFormChange()
    {
        CheckForm();
        CheckFormHtml();
    }

    function show(c_Str)
    {
    if(c_Str =='edit')
    {
        if(document.all('edit').style.display=='none')
        {  
            CheckFormHtml();
            document.all('html').style.display='none';
            document.all('edit').style.display='block';
           
        }
    }
    if(c_Str =='html')
    {
        if(document.all('html').style.display=='none')
        {
            CheckForm();
            document.all('edit').style.display='none';
            document.all('html').style.display='block';
           
        }
    }
    }
</script>
<style type="text/css"> .Hand_Off { TEXT-ALIGN: center }
 .Hand_On { border-RIGHT: #3169c6 1px solid; border-TOP: #3169c6 1px solid; border-LEFT: #3169c6 1px solid; width: 20px; CURSOR: pointer; border-BOTTOM: #3169c6 1px solid; height: 20px; BACKGROUND-COLOR: #c6d3ef; TEXT-ALIGN: center }
</style>
<div id="html" style="display:none;"><textarea id="content" name="content" style="width:500px; height:280px;" runat="server"></textarea></div>
<div id="edit">
<table cellspacing="0" bordercolordark="#ffffff" width="500px" bgcolor="#ffffff" borderColorLight="#666666" border="1">
 
<tr>
 <td>
 <table>
 <tr>
  <td>
   <select name="font_name" id="font_name" οnchange="FontName(this.options[this.selectedIndex].value)">
   <option class="heading" selected>字体</option>
   <option value="宋体">宋体</option>
   <option value="黑体">黑体</option>
   <option value="楷体_GB2312">楷体</option>
   <option value="仿宋_GB2312">仿宋</option>
   <option value="隶书">隶书</option>
   <option value="幼圆">幼圆</option>
   <option value="新宋体">新宋体</option>
   <option value="细明体">细明体</option>
   <option value="Arial">Arial</option>
   <option value="Arial Black">Arial Black</option>
   <option value="Arial Narrow">Arial Narrow</option>
   <option value="Courier">Courier</option>
   <option value="Courier New">Courier New</option>
   <option value="Script">Script</option>
   <option value="System">System</option>
   <option value="Verdana">Verdana</option>
   <option value="Wide Latin">Wide Latin</option>
   <option value="Wingdings">Wingdings</option>
   </select>
  </td>
  <td>
   <select name="font_size" id="font_size" οnchange="FontSize(this.options[this.selectedIndex].value)">
              <option value="1" selected>字号</option>
     <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
     <option value="7">7</option>
            </select>
  </td>
  <td οnclick="FontColor()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/fgcolor.gif" width="16" height="16" border="0" alt="字体颜色"></td>
  <td οnclick="BackColor()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/fbcolor.gif" width="16" height="16" border="0" alt="背景颜色"></td>
  <td οnclick="bold()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/bold.gif" width="16" height="16" border="0" alt="加粗"></td>
  <td οnclick="italic()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/italic.gif" width="16" height="16" border="0" alt="倾斜"></td>
  <td οnclick="underline()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';" style="width: 19px"><img src="Editor/images/underline.gif" width="16" height="16" border="0" alt="下划线"></td>
  <td οnclick="ralign('left')" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/aleft.gif" width="16" height="16" border="0" alt="居左"></td>
  <td οnclick="ralign('center')" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/center.gif" width="16" height="16" border="0" alt="居中"></td>
  <td οnclick="ralign('right')" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/aright.gif" width="16" height="16" border="0" alt="居右"></td>
  <td οnclick="url()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/wlink.gif" width="16" height="16" border="0" alt="超级链接"></td>
  <td οnclick="unurl()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/unlink.gif" width="16" height="16" border="0" alt="取消链接"></td>
  <td οnclick="image()" class ="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/img.gif" width="16" height="16" border="0" alt="插入图片"></td>
  <td οnclick="flash()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/swf.gif" width="16" height="16" border="0" alt="插入Flash动画"></td>
  <td οnclick="wmv()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/wmv.gif" width="16" height="16" border="0" alt="插入Windows Media"></td>
  <td οnclick="rm()" class="Hand_Off"; οnmοuseοver="this.className='Hand_On';" οnmοuseοut="this.className='Hand_Off';"><img src="Editor/images/rm.gif" width="16" height="16" border="0" alt="插入RM电影"></td>  
        <td οnmοuseοver="this.className='Hand_On';" οnclick="unformat()"  οnmοuseοut="this.className='Hand_Off';" class="Hand_Off";οndrag="return false;"><img height="16" border="0" alt="取消格式" src="Editor/images/cleancode.gif" width="16"/></td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td></td>
</tr>
<tr>
 <td>
<script language="javascript" type="text/javascript">
<!--
 Editor(document.aspnetForm.<%=this.content.ClientID %>.value);
//-->
</script>
 </td>
</tr>
</table>
</div>
<input type="button" οnclick="show('edit')" style="width:80px" value="设计" id="Button1" /><input style="width:80px" type="button" οnclick="show('html')" value="HTML" />

   
2．cs代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using WeYyzyq.Comp;

/// <summary>
/// HTML在线编辑器
/// 创建者：江涛
/// 创建时间：2007-5-11
/// </summary>
public partial class Controls_HtmlEdit : System.Web.UI.UserControl
{
    private void Page_Load(object sender, System.EventArgs e)
    {
        if (!IsPostBack)
        {
            Response.Expires = 0;
            Response.Cache.SetNoStore();
            Response.AppendHeader("Pragma", "no-cache");
        }
    }

    /// <summary>
    /// 设置提交控件
    /// </summary>
    /// <param name="ctrl"></param>
    public void SetControl(Control ctrl)
    {
        switch (ctrl.GetType().ToString())
        {
            case "System.Web.UI.WebControls.Button":
                ((Button)ctrl).Attributes.Add("onClick", "CheckForm()");
                break;
            case "System.Web.UI.WebControls.Wizard":
                ((Wizard)ctrl).Attributes.Add("onClick", "CheckForm()");
                break;
        }
    }

    public void GetControl(Wizard ctrl)
    {
        ctrl.Attributes.Add("onClick", "CheckFormChange()");
    }

    public string GetContent
    {
        get
        {
            return StringUtil.GetHtmlEditReplace(content.Value);
        }
        set
        {
            content.Value = value;
        }
    }

}