百度富文本編輯器UEDITOR

前言

http://jingyan.baidu.com/article/a948d65108d7fa0a2dcd2e8d.html

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

配置：

一、將開發包放到mvc4項目中，在個人項目中我放到了Content目錄下

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

三、在頁面中配置初始化編輯器，在頁面中配置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>
    }

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

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

查看Uploader文件默認屬性爲編譯，將其屬性改成內容之後從新運行程序，圖片上傳成功，以下圖：

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

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

六、編輯器等內容咱們能夠經過FormCollection來接收，從而實現內容保存，處理圖片等相關操做

 

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

 

 

解決代碼高亮 不換行問題

UEditor百度編輯器很好用,如今最新版本是1.2.6.0版本,代碼高亮這個功能也頗有用,可是本站集成百度編輯器以後卻發現,代碼高亮不自動換行,看到好多網友也在反映代碼高亮不換行,把父標籤都撐大了,針對這個問題,我研究了下代碼高亮的CSS,解決了這個問題,其它很簡單,把代碼高亮的CSS里加了強制換行的代碼"word-break:break-all;",經IE和Chrome測試都沒問題,算是解決了這個BUG,跟你們分享一下.
解決方法以下:
找到編輯器所在目錄,根據"\third-party\SyntaxHighlighter\shCoreDefault.css"這個路徑找到這個文件,而後找到syntaxhighlighter這個類,在這個類下面加上word-break:break-all;強制換行便可.

.syntaxhighlighter {
width:100%!important;
margin:.3em 0 .3em 0!important;
position:relative!important;
overflow:auto!important;
background-color:#f5f5f5!important;
border:1px solid #ccc!important;
border-radius:4px!important;
border-collapse:separate!important;
word-break:break-all;
}

 

 而後再將項目裏添加一個引用 ，引用文件是 ueditor/net/Bin/Newtonsoft.Json.dll  ，將這個Newtonsoft.Json.dll文件添加爲引用。