asp.net mvc4使用百度ueditor編輯器

前言

　　配置.net mvc4項目使用ueditor編輯器，在配置過程中遇見了好幾個問題，以此來記錄解決辦法。編輯器可以到http://ueditor.baidu.com/website/download.html#ueditor處下載.net 的開發包，如下圖，我下載的是1.2.6.1net版本的開發包。

配置：

1、將開發包放到mvc4項目中，在我的項目中我放到了Content目錄下

2、在模板頁中引入js和樣式文件：

3、在頁面中配置初始化編輯器，在頁面中配置textarea顯示為編輯器，編輯器更多的參數設置可參考ueditor.config.js里面的配置說明：

@using(Html.BeginForm()){
    <textarea id="editor" name="editor">

</textarea>
    <input type="submit" value="提交" />
}

@section scripts{
    <script type="text/javascript">
        var editor = new baidu.editor.ui.Editor({
            UEDITOR_HOME_URL: '/Content/ueditor/',//配置編輯器路徑
            iframeCssUrl: '/Content/ueditor/themes/iframe.css',//樣式路徑
            initialContent: '歡迎使用ueditor',//初始化編輯器內容
            autoHeightEnabled: true,//高度自動增長
            minFrameHeight:500//最小高度
        });
        editor.render('editor');
    </script>
    }

到這一步正常情況下，頁面已經顯示出編輯器的樣子了，如圖：

4、解決圖片上傳問題，通過查看ueditor的配置文件及imageUp.ashx很明顯的可以發現編輯器會把圖片放到uditor/net/upload或upload1文件夾，若不存在則創建文件夾，此時上傳圖片會出現網絡連接錯誤的提示，通過F12查看錯誤如圖

查看Uploader文件默認屬性為編譯，將其屬性改為內容以后重新運行程序，圖片上傳成功，如下圖：

5、解決表單提交錯誤提示問題，從.Net Framework 4.0 開始，ASP.NET開始強制檢測Request參數安全，直接提交會出現如下錯誤，

這個問題在后台action標記[ValidateInput(false)]來解決，如圖：

6、編輯器等內容我們可以通過FormCollection來接收，從而實現內容保存，處理圖片等相關操作

 

以上是百度編輯器在mvc項目中的簡單配置，個人感覺還是很好用的，已經在多個項目中使用了，沒有感覺像很多人說的那樣不好使，個人反而感覺不錯。