您的位置：首页 > Web前端 > HTML

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

2005-04-17 14:18 253 查看
不多说什么是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 

不多做说明了！

代码很简单！只是一些Javascript操作。在后台得到数据主要是用一个隐藏input然后来个Request.Form[""]。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航