富文本编辑器回显问题

问题描述与背景

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

问题分析

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

4. <script></script>
   <input >
   <p>哈哈</p>
   <b>嘻嘻</b>
   嘻嘻

   会将<转换为<来表示，但是修改的时候从数据库中读取这段文本的时候，富文本编辑器会将<这些特殊字符给转换为<，导致浏览器不能正确的显示。所以我们后台在读到数据库将其封装到Article的时候，还需要将article.content再进行转化，article.content.replace("&", "&")这样浏览器就能正确的渲染出来了。

 

转载于:https://my.oschina.net/u/1587638/blog/918388