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

本文主要是介绍关于富文本编辑器回显问题的解决方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题描述与背景

准备写一个自己的博客项目，其中会使用富文本编辑器在后台管理系统中录入文章，最初使用的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: &quot;宋体 Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, 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: &quot;宋体 Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal;"/><span style="font-family: &quot;宋体 Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, 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: &quot;宋体 Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, 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: &quot;宋体 Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, 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: &quot;宋体 Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, Tahoma, Arial, sans-serif; font-size: 14px; white-space: normal;">昨天我给爷爷打电话，他跟我说他卖板鸡有人给他拍照，他问别人你拍我干嘛，那个人回答他说我给你照片放到网上，你生意会更好，我爷爷说你不用放网上我都不够卖的。</p><p><br/></p>

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

解决

方法一：

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对象的内部的值

最终实现效果：

这篇关于关于富文本编辑器回显问题的解决方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！