[转自横渡博客]手把手写Html编辑器

不多说什么是Html编辑器了。就像Blog的发文章控件。
看完就明白了！^o^
=============================
写HTML编辑器所用的都是Iframe。

下面是.aspx代码：

< HTML >  
     < HEAD >  
         < title > WebForm1 </ title >  
         < meta content = " Microsoft Visual Studio .NET 7.1 "  name = " GENERATOR " >  
         < meta content = " C# "  name = " CODE_LANGUAGE " >  
         < meta content = " JavaScript "  name = " vs_defaultClientScript " >  
         < meta content = " http://schemas.microsoft.com/intellisense/ie5 "  name = " vs_targetSchema " >  
         < script language = " javascript " >  
             <!--  
                 // 页面初始化设置 
                 function  PageLoad() 
                { 
                    HtmlEditor.document.designMode  =   " on " ; 
                    document.getElementById( " HtmlEditor " ).style.border  =   " 1px solid #000000 " ; 
                    document.getElementById( " HtmlEditor " ).style.width  =   " 100% " ; 
                    document.getElementById( " HtmlEditor " ).style.height  =   " 70% " ; 
                } 
                 
                 // 页面提交 
                 function  PageSubmit() 
                { 
                    document.FormAction.inpContent.value  =  HtmlEditor.document.body.innerHTML; 
                } 
                 
                 // 插入表情 
                 function  InnerFace( obj ) 
                { 
                    HtmlEditor.focus(); 
                    HtmlEditor.document.selection.createRange().pasteHTML(obj.innerHTML); 
                } 
                 
                 // 编辑所选 
                 function  SetSelect( strChange ) 
                { 
                    HtmlEditor.focus(); 
                     var  strValue  =  HtmlEditor.document.selection.createRange().duplicate().text; 
                     if  ( strValue  !=   ""   &&  strValue  !=   null  ) 
                    { 
                        HtmlEditor.document.selection.createRange().duplicate().pasteHTML(  " < "   + strChange  +   " > "   +  strValue  +   " </ "   + strChange  +   " > "  ); 
                    } 
                } 
             -->  
         </ script >  
     </ HEAD >  
     < body onload = " PageLoad(); " >  
         < form id = " FormAction "  method = " post "  runat = " server " >  
             < iframe id = " HtmlEditor "  name = " HtmlEditor "  marginheight = " 1 "  marginwidth = " 1 "  frameborder = " no " >  
             </ iframe >  
             < table cellpadding = " 0 "  cellspacing = " 0 "  width = " 100% "  border = " 0 " >  
             < tr >  
                 < td onclick = " InnerFace(this) " >< img src = " msn.gif "  border = " 0 " ></ td >  
                 < td onclick = " SetSelect('B') " >< input type = " button "  value = " 加粗 " /></ td >  
             </ tr >  
             </ table >  
             < p align = " center " >  
                 < asp:Button id = " btnSubmit "  runat = " server "  Text = " Submit "  BorderStyle = " Solid "  BorderWidth = " 1px "  
                    BackColor = " #E0E0E0 " ></ asp:Button >  
             </ p >  
             < input type = " hidden "  id = " inpContent "  name = " inpContent " >  
         </ form >  
     </ body >  
</ HTML >  

这里是.CS代码：

using  System; 
using  System.Collections; 
using  System.ComponentModel; 
using  System.Data; 
using  System.Drawing; 
using  System.Web; 
using  System.Web.SessionState; 
using  System.Web.UI; 
using  System.Web.UI.WebControls; 
using  System.Web.UI.HtmlControls; 
using  System.Text; 
 
namespace  TestProject 
{ 
    /**//**//**//// <summary> 
    /// Summary description for WebForm1. 
    /// </summary> 
    public class Default : System.Web.UI.Page 
    { 
        protected System.Web.UI.WebControls.Button btnSubmit; 
     
        private void Page_Load(object sender, System.EventArgs e) 
        { 
            // Put user code to initialize the page here 
            btnSubmit.Attributes.Add( "onClick","PageSubmit()" ); 
        } 
 
        Web Form Designer generated codeWeb Form Designer generated code#region Web Form Designer generated code 
        override protected void OnInit(EventArgs e) 
        { 
            // 
            // CODEGEN: This call is required by the ASP.NET Web Form Designer. 
            // 
            InitializeComponent(); 
            base.OnInit(e); 
        } 
         
        /**//**//**//// <summary> 
        /// Required method for Designer support - do not modify 
        /// the contents of this method with the code editor. 
        /// </summary> 
        private void InitializeComponent() 
        {     
            this.btnSubmit.Click += new System.EventHandler(this.btnSubmit_Click); 
            this.Load += new System.EventHandler(this.Page_Load); 
 
        } 
        #endregion 
 
        private void btnSubmit_Click(object sender, System.EventArgs e) 
        { 
            if ( Request.Form["inpContent"] != string.Empty && Request.Form["inpContent"] != null ) 
            { 
                Response.Write( Server.HtmlDecode( Request.Form["inpContent"] ) ); 
            } 
        } 
 
    } 
}  

不多做说明了！
代码很简单！只是一些Javascript操作。在后台得到数据主要是用一个隐藏input然后来个Request.Form[""]。

转载于:https://www.cnblogs.com/Elong/archive/2005/04/17/139234.html