关于富文本编辑器回显问题的解决方法

问题描述与背景

准备写一个自己的博客项目，其中会使用富文本编辑器在后台管理系统中录入文章，最初使用的CKEditor作为富文本编辑器。在新增文章的时候可以正确的使用富文本编辑器保存到数据库中，但是在使用富文本编辑器修改原来的文章的时候，发现很多标签不能正确的显示

问题分析

1. 我怀疑是我使用的富文本编辑器有问题，于是换成了simditor富文本编辑器，但是还是出现了同样的问题。排除是编辑器的问题。


2. 找到oschina中写博客的网页源码，似乎oschina的富文本编辑器就是使用的CKEditor，看了源码发现和自己后台写得代码有点不同，先看看代码。第一个红色框中是我们自己数据库中存的文章html代码，但是第二个红色框中还有一段文本，只不过部分被编码过得，我肯定这段内容肯定是富文本编辑器弄出来的，那么为什么会有2份文章呢？我想应该是富文本编辑器要渲染我们的文章内容，需要对文章做些处理，所以复制了一份，在copy的这份上进行渲染的。

1. 找到问题原因了，是因为富文本渲染我们的文本出了问题。然后我们继续分析一下原因。在数据库中保存的文章内容是这样子的：

<p style="margin-top: 0px; margin-bottom: 0px; padding: 30px 0px 30px 5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 24px; color: rgb(51, 51, 51); text-indent: 40px; font-family: "宋体 Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal;">爷每天5点起床，去鸡行里选鸡，选的是大小均匀的老母鸡，送到家里从杀鸡放血开始，鸡血要留着，倒在有盐水的碗里，烧好开水拔了毛连鸡嘴巴鼻子里的粘液都要挤出来。鸡洗干净六只鸡放到一个锅里炖，要炖一个上午，要注意火候鸡皮不能裂。p><p><img src="http://www.liupengfei.com/res/img/wz_img1.jpg" style="display: inline-block; vertical-align: middle; border: none; float: none; width: 1000px; font-family: "宋体 Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal;"/><span style="font-family: "宋体 Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; font-size: 14px;">span>p><p style="margin-top: 0px; margin-bottom: 0px; padding: 30px 0px 30px 5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 24px; color: rgb(51, 51, 51); text-indent: 40px; font-family: "宋体 Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal;">炖好的鸡挂在架子上晾干，再一片片剁开，每只鸡剁的块数都是一样，然后把鸡肉放到提前调好的水中腌两个小时，水里面的调料也是爷爷自己去市场买来磨成粉的。锅里还有剩的鸡汤，用鸡汤煮好面叶上面漂着一层绿油油的葱花。p><p style="margin-top: 0px; margin-bottom: 0px; padding: 30px 0px 30px 5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 24px; color: rgb(51, 51, 51); text-indent: 40px; font-family: "宋体 Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal;">以前爷爷都是用扁担一头面叶一头板鸡挑到街上摊位上卖，现在爷爷年纪大了，只能用三轮车推着。摊位摆好奶奶就会慢悠悠的拎着一个保温桶和一个小红桶过来，保温桶里装的是卤鸡蛋，小红桶留着装别人吃剩的骨头喂狗。他们只有晚上出摊，收完摊已经要9点钟了，回去还要洗一天用的抹布和衣服，爷爷奶奶都非常爱干净，摊上的所有抹布纱布都是白色的每天洗的一个油点都看不到。9年前奶奶去世了，爷爷奶奶青梅竹马感情非常好，奶奶去世的时候爷爷甚至还要求过把奶奶埋在院子里。现在爷爷有时候会偷偷跟我说，你奶奶昨天回来看我了，她还给我掖被子，我知道是她，我跟她说你别挂念我，我好的很 跑题了。p><p style="margin-top: 0px; margin-bottom: 0px; padding: 30px 0px 30px 5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 24px; color: rgb(51, 51, 51); text-indent: 40px; font-family: "宋体 Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal;">昨天我给爷爷打电话，他跟我说他卖板鸡有人给他拍照，他问别人你拍我干嘛，那个人回答他说我给你照片放到网上，你生意会更好，我爷爷说你不用放网上我都不够卖的。p><p><br/>p>

会将<转换为<来表示，但是修改的时候从数据库中读取这段文本的时候，富文本编辑器会将<这些特殊字符给转换为<，导致浏览器不能正确的显示。

解决

方法一：

1：前台显示数据的网页，引入富文本编辑器（路径根据自己的项目路径为准）

<script type="text/Javascript" charset="utf-8" src="/ueditor/ueditor.config.js">script>
<script type="text/Javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js">script>
<script type="text/Javascript" charset="utf-8" src="/ueditor/ueditor.parse.js">script>
<script type="text/Javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js">script>

2：在接收后台数据的地方，绑定富文本编辑器

<div class="article_all">
<div class="article_list">
<a class="article_item" href="Javascript:viod(0);">
<textarea id="editor" name="content" >{{$res->content}}textarea>

a>
div>
div>

3：利用js实例化富文本编辑器

方法二：（亲测有效）

1：找到富文本绑定的dom对象

2：利用隐藏域传值修改此DOM对象的内部的值

最终实现效果：