[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

        
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/p/101081.html