問題描述與背景
准備寫一個自己的博客項目，其中會使用富文本編輯器在后台管理系統中錄入文章，最初使用的CKEditor作為富文本編輯器。在新增文章的時候可以正確的使用富文本編輯器保存到數據庫中，但是在使用富文本編輯器修改原來的文章的時候，發現很多標簽不能正確的顯示
問題分析
- 我懷疑是我使用的富文本編輯器有問題，於是換成了simditor富文本編輯器，但是還是出現了同樣的問題。排除是編輯器的問題。
- 找到oschina中寫博客的網頁源碼，似乎oschina的富文本編輯器就是使用的CKEditor，看了源碼發現和自己后台寫得代碼有點不同，先看看代碼。第一個紅色框中是我們自己數據庫中存的文章html代碼，但是第二個紅色框中還有一段文本，只不過部分被編碼過得，我肯定這段內容肯定是富文本編輯器弄出來的，那么為什么會有2份文章呢？我想應該是富文本編輯器要渲染我們的文章內容，需要對文章做些處理，所以復制了一份，在copy的這份上進行渲染的。
- 找到問題原因了，是因為富文本渲染我們的文本出了問題。然后我們繼續分析一下原因。在數據庫中保存的文章內容是這樣子的：
<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對象的內部的值
最終實現效果：
了解更多可以關注 我的語雀 哦！來這里找找看有沒有你想要的答案呢？每天更新 新的知識點，細節中！