asp.net制作简单的文本编辑器【转】

大多数的在线文本编辑器都是使用JavaScript语言实现文本编辑的,本示例也是用JavaScript实现。文本的编辑区是通过使用Iframe框架来创建一个区域,并使用document对象中的designMode属性设置该区域为可编辑区域。designMode设置为On时,表示可编辑,为Off时表示不可编辑。

    文本的编辑功能主要使用document对象的execCommand方法来实现,该方法执行一个命令。常用命令及说明如下表:

命令

说明

BackColor

设置或获取当前选中区的背景色

Bold

设置当前选中区为粗体

Copy

将当前选中区复制到剪贴板

Cut

将当前选中区复制到剪贴板并删除

CreateLink

将当前选中区插入超链接,或显示一个对话框允许用户输入超链接的URL

Delete

删除当前选中区

FontName

设置或获取当前选中区的字体

Italic

设置当前选中区为斜体

FontSize

设置或获取当前选中区的字体大小

FontColor

设置或获取当前选中区前景(文本)颜色

Indent

增加选中区的缩进

Outdent

减少选中区的缩进

JustifyLeft

设置当前选中区左对齐

justifyCenter

设置当前选中区居中

justifyRight

设置当前选中区右对齐

Underline

设置当前选中区的下划线

 

示例代码如下所示:

(1)simpleEditor.aspx代码:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>文本编辑器</title>
    <script language="javascript" type="text/javascript">
    //设置编辑区域
       function document.onreadystatechange() 
       { 
        txtArea.document.designMode="On"; 
       } 
        //设置文字居左
        function txtLeft()
        {
            txtArea.document.execCommand("justifyLeft");
        }
        //设置文字居中
        function txtCenter()
        {
            txtArea.document.execCommand("justifyCenter");
        }
        //设置文字居右
        function txtRight()
        {
            txtArea.document.execCommand("justifyRight");
        }
        //设置文字为粗体
        function txtbold()
        {
            txtArea.document.execCommand("Bold");
        }
        //设置文字为斜体
        function txtItalic()
        {
            txtArea.document.execCommand("Italic");
        }
        //设置文字字号               
        function txtFontName()
        {
            var txtSize=document.getElementById("Select1").value;        
          txtArea.document.execCommand("fontsize","",txtSize)
        }
        //设置文字下划线
        function txtUnderline()
        {
            txtArea.document.execCommand("Underline");
        }
        //将文本保存到隐藏域中
        function saveTxt()
        {
            var s =txtArea.document.body.innerHTML;
            document.getElementById("hiddenText").value=s         
        }
    </script>
</head>
<body style="text-align: center; font-size: 12pt;">
    <form id="form1" runat="server">
    <div>
        <div style="text-align:center">
            <table cellpadding="0" cellspacing="0" style="width:452px;height:361px;border:0;">
                <tr>
                   <td>
                        字号<select id="Select1" οnchange="txtFontName();"  >
                                 <option  selected="selected" value="3">3</option>
                                 <option value="5">5</option>
                                 <option value="8">8</option>
                            </select></td>
                    <td><input id="btnBold" type="button" value="粗体" οnclick="txtbold();" /></td>
                    <td><input id="btnItalic" type="button" value="斜体" οnclick="txtItalic();" /></td>
                    <td><input id="btnUnder" type="button" value="下划线" οnclick="txtUnderline();" /></td>
                    <td><input id="btnLeft" type="button" value="左对齐" οnclick="txtLeft();" /></td>
                    <td><input id="btnCenter" type="button" value="居中" οnclick="txtCenter();" /></td>
                    <td><input id="btnRight" type="button" value="右对齐" οnclick="txtRight();" /></td>
                </tr>
                <tr>
                    <td  colspan="7">
                        <iframe  id="txtArea" name="txtArea" frameborder="0" style="height:337px;width:98%;border:1px solid #000033;" ></iframe></td>
                </tr>
            </table>
        </div>
   
    </div> 
     <input id="hiddenText" name="hiddenText" type="hidden" runat="server" />
     <asp:Button ID="btnSubmit" runat="server"   Text="提交" OnClick="btnSubmit_Click" />
    </form>
</body>
</html>

(2)simpleEditor.cs代码:

    protected void Page_Load(object sender, EventArgs e)
    {
        //设置提交按钮的单击事件
        btnSubmit.Attributes.Add("onclick", "saveTxt();");
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        //获取隐藏域中的文本
        string s = hiddenText.Value;
        //将文本保存到session中
        Session["txt"] = s;
        //跳转到showTxt页面显示文本
        Response.Redirect("showTxt.aspx");
    }

(3)showTxt.cs代码:

Response.Write(Session["txt"]);//获取并输出编辑区的文本内容

    注意:在asp.net中,页面提交会把文本编辑器中的HTML内容当成攻击的内容,因此需要在aspx页面的Page标签中设置ValidateRequest=”false”来禁用攻击检测。

转载于:https://www.cnblogs.com/29ing/archive/2012/12/26/2833519.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值