MVC 使用 Ueditor富文本編輯器

一.Ueditor

1.下載Ueditor富文本編輯器

官方下載地址： http://ueditor.baidu.com/website/download.html

建議下載開發版，此處我下載的是 .net 版本的

 

2.項目中添加Ueditor富文本編輯器

解壓UEditor包，把ueditor文件夾拖到項目中的文件夾下，此處我放在Scripts文件夾下，建議使用項目上方的「顯示全部文件」按鈕，找到要添加到項目中的文件，右鍵「包括在項目中」，Ueditor富文本編輯器就添加到項目中

 

3.項目中使用Ueditor富文本編輯器

首先，引用Ueditor中的JS文件，以下圖：

JS文件順序：先引用ueditor.config.js，再引用ueditor.all.js

 

而後，根據net文件下的index.html中，建立編輯器

 

4.配置Ueditor富文本編輯器

建立編輯器後，運行，顯示編輯器，其中上傳圖片的功能須要進行配置，設置圖片上傳的路徑

（1）圖片上傳配置：

配置位置：Config.json文件

更改上傳路徑，以下圖是我更改後的路徑（相對路徑），其中的{shopid}是可替換的文件夾名稱，替換文件爲App_Code/PathFormatter.cs

 

（2）配置工具欄

配置位置：ueditor.config.js

去除不須要的工具，以下圖：

 

 

5.後臺使用Ueditor富文本編輯器

問題：Ueditor富文本編輯器，傳值到後臺獲取時，直接傳值會報錯

緣由：MVC禁止帶HTML標籤的字符串進入後臺（禁止帶HTML標籤的字符串進入後臺，提升了應用程序的安全性）

解決方案：

1.在web.Config文件中修改

 Web.config增長<httpRuntime requestValidationMode="2.0" />

注意：直接在web.config文件中修改，會下降應用程序的安全性，不建議使用

 

2.只須要在獲取Ueditor編輯器的ActionResult添加 ValidateInput，以下圖：

 注意：[ValidateInput(false)]後，在使用Request獲取Ueditor富文本內容時，會再次報錯，不能使用Request獲取，當前我使用的是FormCollection（form表單集合）