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使用終於完成了，下面放上效果圖:
