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

　 小站首頁(yè)文章列表顯示為（顯示去除HTML標(biāo)簽后的前600個(gè)字符）： 具體在www.zynblog.com

遇到的問題：

正常來講，進(jìn)入文章修改頁(yè)，只需將UEditor對(duì)應(yīng)的textarea的value設(shè)置為文章Content就行了： $('#editor').val('@Html.Raw(this.Model.Contents)');

最開始我就是這樣做的，一切正常；直至我在后臺(tái)編輯文章時(shí)插入了一段"代碼"(<pre>（***code***</pre>)格式的html! 于是再次在后臺(tái)點(diǎn)擊“編輯”->跳轉(zhuǎn)到編輯頁(yè)時(shí)，

UEditor完全不顯示了！！。

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

初步猜測(cè)是js出錯(cuò)了，導(dǎo)致UEditor渲染過程出錯(cuò)。好吧，調(diào)試之后發(fā)現(xiàn)了這個(gè)：

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

注意，里面的換行就是換行\(zhòng)n的文本表示，這樣前臺(tái)的代碼就被解釋成如下：

我們知道，在js中的換行，默認(rèn)就是一個(gè)新的語句的開始，上面代碼的第一行initalContent賦值的是一個(gè)js字符串，但是只有一個(gè)左單引號(hào)"'"（在<pre>前），缺少了右引號(hào)"'"。這時(shí)js就不認(rèn)識(shí)這是個(gè)什么東東了，他沒找到失散的右單引號(hào)。so客戶端也就運(yùn)行不下去了，textarea的UEditor效果自然顯示不出來。

　　解決方案：

　　是的，既然UEditor的初始化需要一個(gè)完整的js字符串，那么我們就將文章內(nèi)容序列化為json，再賦值給矯情的UEditor就行了（因?yàn)閖son本身就是js的一個(gè)對(duì)象，不必也不要將其解析后再賦值給UEditor），這樣一來就不存在換行不換行的問題了。

　　當(dāng)然，還有一個(gè)問題，就是：C#中jss.Serialize()把一個(gè)換行解析成了\n，而UEditor則將\r和\n都解析成了換行，這樣，原本只有一個(gè)換行的就變成了兩個(gè)換行。所以我們可以在初始化之前，用字符串替換函數(shù)解決這個(gè)問題。 如：

initialContent=initialContent.replace(/\\r\\n/g,'\\n');

序列化Article.Content時(shí)去除重復(fù)換行:

public ActionResult EditArchive(int id)
{
Article article = articleService.GetEntity(id);
//json把換行解析成\n;而UEditor將\r和\n都解析成了換行。
//這樣原來只有一個(gè)換行的就變成了兩個(gè)換行。
//所以在初始化百度編輯器之前，用js字符串替換一下就可以了
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(article.Contents.Replace("\"", " '")); 
　　　　　　　//先把文章Contents內(nèi)容屬性里面的C#對(duì)"的轉(zhuǎn)義換為';以免對(duì)img src=“” href=“”造成（雙重轉(zhuǎn)義的）影響。
//去除json中的首尾部""引號(hào)，
json = json.Substring(1, json.Length - 2);
// json編碼格式的<br>: \u003cbr/\u003e
ViewData["json"] = json;
*****do other things。。。。。。。。。。。。
} 

給textarea UEditor賦值時(shí)：

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

　　這樣一來，再次點(diǎn)"編輯文章"，UEditor就渲染出來了。But問題又來了?。?！這樣傳json后，編輯區(qū)域（body）的圖片/文件src=“”、<a href="">、style=“”等等帶雙引號(hào)的元素都不顯示了！繼續(xù)調(diào)試吧，找了半天，發(fā)現(xiàn)問題所在了：后臺(tái)在將文章從數(shù)據(jù)庫(kù)中取出來后，C#會(huì)自動(dòng)對(duì)Content屬性字符串中的所有""、/等進(jìn)行自動(dòng)轉(zhuǎn)義；之后在將其進(jìn)行JSON序列化時(shí)又會(huì)將/"、//進(jìn)行轉(zhuǎn)義，這樣就造成了"雙重轉(zhuǎn)義"，因此所有帶""的元素及其屬性均顯示錯(cuò)誤。解決方案：在后臺(tái)序列化之前手動(dòng)去掉第一層轉(zhuǎn)義即可：

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

顯示正常了：

以上所述是小編給大家介紹的利用ASP.NET MVC+Bootstrap搭建個(gè)人博客之修復(fù)UEditor編輯時(shí)Bug(四)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論