本文介绍了HTML编辑器，类似Blog发文章控件，编写所用为Iframe。给出了.aspx和.CS代码示例，其中.aspx代码包含JavaScript操作，如页面初始化、提交、插入表情等功能；.CS代码用于处理页面加载和提交事件，在后台通过隐藏input获取数据。
不多说什么是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[""]。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
