[转自横渡博客]手把手写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
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[""]。
看完就明白了！^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
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[""]。
