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

眾所周知，富文本編輯器是目前用途廣泛的前端插件，它可以直接編輯並保存多樣化的文本格式。適用於論壇留言，簡單文章發佈，自定義靜態頁面等。本文簡單對一種安全使用富文本編輯器的方法進行介紹。文章實例

文章使用 UEditor富文本編輯器版本為1.2.2,語言為C#，網站類型為ASP.NET

• 目錄
  • 準備工作
  • 創建Ueditor控制項對象
  • 與伺服器交流
  • 安全通信

準備工作

首先去官網下載最新版本的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使用終於完成了，下麵放上效果圖: