ASP.NET MVC+Bootstrap我的博客之修復UEditor編輯時Bug（四）

    個人我的博客站在使用百度富文本編輯器UEditor修改文章時，遇到了一些問題，(不知是bug，仍是我沒有配置好)。但總算找到了解決方法，在此記錄下來。

遇到的問題：

      正常來說，進入文章修改頁，只需將UEditor對應的textarea的value設置爲文章Content就好了： $('#editor').val('@Html.Raw(this.Model.Contents)');

最開始我就是這樣作的，一切正常；直至我在後臺編輯文章時插入了一段"代碼"(<pre>（***code***</pre>)格式的html! 因而再次在後臺點擊「編輯」->跳轉到編輯頁時，

UEditor徹底不顯示了！！。

原文地址在  http://www.zynblog.com/Archives/Index/2

初步猜想是js出錯了，致使UEditor渲染過程出錯。好吧，調試以後發現了這個：

文章中的代碼顯示爲<pre>格式 <pre>#include&nbsp;&lt;stdio.h&gt;int&nbsp;main(){
    &nbsp;&nbsp;&nbsp;&nbsp;printf(&quot;hello&nbsp;world!&quot;);
    &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;0;
}</pre>

    注意，裏面的換行就是換行\n的文本表示，這樣前臺的代碼就被解釋成以下：

      咱們知道，在js中的換行，默認就是一個新的語句的開始，上面代碼的第一行initalContent賦值的是一個js字符串，可是隻有一個左單引號"'"（在<pre>前），缺乏了右引號"'"。這時js就不認識這是個什麼東東了，他沒找到失散的右單引號。so客戶端也就運行不下去了，textarea的UEditor效果天然顯示不出來。

　　解決方案：

　　是的，既然UEditor的初始化須要一個完整的js字符串，那麼咱們就將文章內容序列化爲json，再賦值給矯情的UEditor就好了（由於json自己就是js的一個對象，沒必要也不要將其解析後再賦值給UEditor），這樣一來就不存在換行不換行的問題了。

　　固然，還有一個問題，就是：C#中jss.Serialize()把一個換行解析成了\n，而UEditor則將\r和\n都解析成了換行，這樣，本來只有一個換行的就變成了兩個換行。因此咱們能夠在初始化以前，用字符串替換函數解決這個問題。 如：initialContent=initialContent.replace(/\\r\\n/g,'\\n');

序列化Article.Content時去除重複換行:

        public ActionResult EditArchive(int id)
        {
            Article article = articleService.GetEntity(id);
            //json把換行解析成\n;而UEditor將\r和\n都解析成了換行。
            //這樣原來只有一個換行的就變成了兩個換行。
            //因此在初始化百度編輯器以前，用js字符串替換一下就能夠了
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string json = jss.Serialize(article.Contents.Replace("\"", " '"));  
　　　　　　　//先把文章Contents內容屬性裏面的C#對"的轉義換爲';以避免對img src=「」 href=「」形成（雙重轉義的）影響。
            //去除json中的首尾部""引號，
            json = json.Substring(1, json.Length - 2);
            // json編碼格式的<br>: \u003cbr/\u003e
            ViewData["json"] = json;

            *****do other things。。。。。。。。。。。。
         }

給textarea UEditor賦值時：

   var editor = new baidu.editor.ui.Editor({
        UEDITOR_HOME_URL: '/Content_Admin/ueditor/',//配置編輯器路徑
        iframeCssUrl: '/Content_Admin/ueditor/themes/iframe.css',//樣式路徑
        initialContent: '歡迎使用ueditor',//初始化編輯器內容
        autoHeightEnabled: true,//高度自動增加
        minFrameHeight: 500//最小高度
    });
    editor.render('editor');  //render('selector')響應的id
    editor.ready(function () {
        var content = '@ViewData["json"]';  //給UEditor賦值json
        content = content.replace(/\\r\\n/g, '\\n');
        editor.setContent(content);   //這種方式會致使在編輯器body內的樣式style、圖片等帶路徑的內容轉義"顯示錯誤;
                                      //在後臺將C#字符串中的\"替換爲'後就能夠了。例：style='width:50px' src='';
    });
//UE.getEditor('editor').getContentTxt()  獲取編輯器內容純文本格式

　　這樣一來，再次點"編輯文章"，UEditor就渲染出來了。But問題又來了！！！這樣傳json後，編輯區域（body）的圖片/文件src=「」、<a href="">、style=「」等等帶雙引號的元素都不顯示了！繼續調試吧，找了半天，發現問題所在了：後臺在將文章從數據庫中取出來後，C#會自動對Content屬性字符串中的全部""、/等進行自動轉義；以後在將其進行JSON序列化時又會將/"、//進行轉義，這樣就形成了"雙重轉義"，所以全部帶""的元素及其屬性均顯示錯誤。解決方案：在後臺序列化以前手動去掉第一層轉義便可：

string json = jss.Serialize(article.Contents.Replace("\"", " '"));

顯示正常了：