欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何更加安全快速的使用富文本编辑器

程序员文章站 2022-06-28 21:01:02
title: 如何更加安全快速的使用富文本编辑器 date: 2019 03 28 08:45:28 tags: C 众所周知,富文本编辑器是目前用途广泛的前端插件,它可以直接编辑并保存多样化的文本格式。适用于论坛留言,简单文章发布,自定义静态页面等。本文简单对一种安全使用富文本编辑器的方法进行介绍 ......

title: 如何更加安全快速的使用富文本编辑器
date: 2019-03-28 08:45:28
tags: c#
---

众所周知,富文本编辑器是目前用途广泛的前端插件,它可以直接编辑并保存多样化的文本格式。适用于论坛留言,简单文章发布,自定义静态页面等。本文简单对一种安全使用富文本编辑器的方法进行介绍。文章实例

文章使用 ueditor富文本编辑器版本为1.2.2,语言为c#,网站类型为asp.net

准备工作

首先去官网下载最新版本的ueditor,目前时间2019.3.28该插件还没有更新,

解压后文件目录为
如何更加安全快速的使用富文本编辑器

可以直接将整个文件夹附加在建立的.net网站中。其中net文件夹里app_code文件需全部转移至编写网站的app_code中,便于后面代码中直接使用。因此,整个目录结构为

  • 网站目录
    • app_code
      • 下载的editor文件夹的app_code中.cs文件
      • 网站使用的其他.cs文件
    • ueditor
    • 其他的文件

创建ueditor控件对象

首先创建一个web应用窗体 ueditor.aspx ,我们添加editor的核心js文件,添加代码如下:

    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

首先我们需要加入一个editor的载体。我选择的是一个textarea标签,其中我设置了长宽,需要的同学可以学习一下css技巧使用合适的大小。

    <textarea id="editor"  style="width:600px;height:200px"></textarea>

接下来就是最重要的地方,我们使用js来控制editor的生成,代码一定要放在标签下方,因为html是自上而下阅读的。

    <script>
        var ue = ue.geteditor('editor');
    </script>

完成以上操作之后就可以大胆开启。下图是运行结果:
如何更加安全快速的使用富文本编辑器

与服务器交流

完成以上操作,我们的编辑器就可以使用了,我们接下来要进行服务器操作。

我们需要如下修改textarea标签,这个标签中出现了runat属性,这是asp.net的一个服务器标识,为了在post时把该标签一并发往服务器。后面又加了一个button控件,这个控件主要是为了表单提交使用,感兴趣的同学可以了解一下,其中onclick指的是服务器后台方法。对应c#函数,而onclientclick指的是前台的方法。经过服务器解析后,onclick会隐藏,而onclientclick会转化为前台html标签的onclick属性。

    <textarea id="editor" runat="server" style="width:600px;height:200px"></textarea>
    <asp:button runat="server" id="btnpost" text="点我提交" onclick="btn_post_click"  onclientclick="befsubmit()"    />

接下来的代码一定要放在标签下方,因为html是自上而下阅读的。

    <script>
            function befsubmit () {
                var pstr = $("#<%=editor.clientid%>");
                 pstr.text(ue.getcontent());
                //alert(ue.getcontent());
            }
    </script>
    protected void btn_post_click(object sender,eventargs e)
    {
        string str = server.htmldecode(editor.innerhtml);

        response.write(str);
    }

上面代码中的<%=editor.clientid%>也是服务器标签,是让编译后的html文件能够获取到转化后的标签id

安全通信

如果你按照我的方法进行到现在,那提交按钮点击过后肯定会出错,这是因为富文本编辑器的内容是完整的html代码,它会带有类似img,script这样的标签。这对于服务器安全来说是不安全的,因此会保护性报错。这时候我们就要考虑将内容进行加密传输。

为了不影响到editor内容,我选择使用另外的textare标签作为载体,同时把它隐藏。然后对内容进行base64加密,为了保证js加密中文到c#解密不会出错,我参考了,将c#内容放在mybase64类中写成静态方法。

    <textarea id="editor" style="width: 600px; height: 200px"></textarea>
    <textarea style="display: none;" id="poststr" runat="server" ></textarea>
    <asp:button runat="server" id="btnpost" text="点我提交" onclick="btn_post_click" onclientclick="befsubmit()" />

    <script>
        function befsubmit() {
            var pstr = $("#<%=poststr.clientid%>");
            pstr.text(encode64(strunicode2ansi(ue.getcontent())));
            //alert(ue.getcontent());

        }
    </script>
    protected void btn_post_click(object sender,eventargs e)
    {
        string str = server.htmldecode(poststr.innerhtml);

        response.write(mybase64.base64decode(str));
    }

完成上面的改动后,我们的editor使用终于完成了,下面放上效果图:
如何更加安全快速的使用富文本编辑器