[JavaScript]手把手写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 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/HD/archive/2005/02/02/101081.html