我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好)。但总算找到了解决方法,在此记录下来。

  小站首页文章列表显示为(显示去除HTML标签后的前600个字符):  具体在 www.zynblog.com

遇到的问题:

正常来讲,进入文章修改页,只需将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渲染过程出错。好吧,调试之后发现了这个:

1
文章中的代码显示为<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>

注意,里面的换行就是换行\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("\"", " '"));

显示正常了:

 

ASP.NET MVC+Bootstrap个人博客之修复UEditor编辑时Bug(四)的更多相关文章

  1. ASP.NET MVC+Bootstrap个人博客之修复UEditor编辑时Bug(四)

    我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 遇到的问题: 正常来讲,进入文章修改页,只需将U ...

  2. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  3. ASP.NET MVC+Bootstrap个人博客之文章打赏(六)

    看到新浪微博.百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能. 当然,加入打赏功能并非是真的想要让别人打赏.因为只有那些真正能引起共鸣,发人深思,让人受益 ...

  4. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  5. ASP.NET MVC+Bootstrap个人博客之后台dataTable数据列表(五)

    jQuery  dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示 ...

  6. ASP.NET MVC+Bootstrap个人博客之打造清新分页Helper(三)

    有点另类,分页直接是在后台拼接好html,然后发送到前台的: 1. 分页容器: <div class="pagination"> <ul> //****** ...

  7. ASP.NET MVC Liu_Cabbage 个人博客

    RightControl_Blog 介绍 前台使用燕十三博客前端模板,后台基于RightControl .NET通用角色权限管理系统搭建,已完成.项目地址:http://www.baocaige.to ...

  8. ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers

    阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...

  9. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理

    这是本人第一次写,写的不好的地方还忘包含.写这个的主要原因是想通过这个来学习下EF的CodeFirst模式,本来也想用AngularJs来玩玩的,但是自己只会普通的绑定,对指令这些不是很熟悉,所以就基 ...

随机推荐

  1. Boost简介

    原文链接:  吴豆豆http://www.cnblogs.com/gdutbean/archive/2012/03/30/2425201.html Boost库 Boost库是为C++语言标准库提供扩 ...

  2. linux入门教程(十) 文档的压缩与打包

    在windows下我们接触最多的压缩文件就是.rar格式的了.但在linux下这样的格式是不能识别的,它有自己所特有的压缩工具.但有一种文件在windows和linux下都能使用那就是.zip格式的文 ...

  3. git Unstaged changes after reset

    转载:http://my.oschina.net/yuzn/blog/150275 相信大家都做过这个操作,就是本地做了修改后,不想提交,想恢复如初 git reset HEAD   这样的话,我们就 ...

  4. 224. Basic Calculator

    题目: Implement a basic calculator to evaluate a simple expression string. The expression string may c ...

  5. Java API —— File类

    1.File类的概述         文件和目录路径名的抽象表示形式,创建File对象后,仅仅是一个路径的表示,不代码具体的事物一定是存在的. 2.构造方法         · public File ...

  6. c语言头文件和源文件不在同一个目录

    http://www.cnblogs.com/ShaneZhang/archive/2013/05/20/3088688.html 从工程上讲,头文件的文件名应该与对应的源文件名相同便于维护,如果头文 ...

  7. 10位顶级PHP大师的开发原则

    在Web开发世界里,PHP是最流行的语言之一,从PHP里,你能够很容易的找到你所需的脚本,遗憾的是,很少人会去用“最佳做法”去写一个PHP程序.这里,我们向大家介绍PHP的10种最佳实践,当然,每一种 ...

  8. 在Linux中创建静态库和动态库

    我们通常把一些公用函数制作成函数库,供其它程序使用. 函数库分为静态库和动态库两种. 静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库. 动态库在程序编译时并不会被连接到目标代码中 ...

  9. 【C#设计模式——创建型模式】简单工场模式

    进入码农行列也有一年半载了,仍然感觉自己混混沌沌,无所事事,无所作为,,,想想都下气,下气归下气,仍要奋起潜行,像愤怒的小鸟一边又一遍的冲向猪头也好,像蜗牛一样往前蹭也罢,总之要有蚂蚁啃骨头的精神!! ...

  10. Android开发之执行定时任务AlarmManager,Timer,Thread

    1.Thread:使用线程方式2.Timer是java的特性3.AlarmManager:AlarmManager将应用与服务分割开来后,使得应用程序开发者不用 关心具体的服务,而是直接通过Alarm ...