富文本编辑器内容存储至Mysql
生活随笔
收集整理的這篇文章主要介紹了
富文本编辑器内容存储至Mysql
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 概述
- 獲取富文本編輯器內(nèi)容
- 后端數(shù)據(jù)處理
概述
在所有的編輯器中，大概最受歡迎的就是富文本編輯器和MarkDown編輯器了，無論哪一種編輯器，我們需要知道的是，發(fā)給后端的內(nèi)容是帶著html標(biāo)簽的字符串，而我們需要把這些字符串存儲到數(shù)據(jù)庫中，其實(shí)原理非常簡單，為了便于理解，我們首先創(chuàng)建一張表：
CREATE TABLE `tb_title` (`title_id` int(11) NOT NULL COMMENT '文章Id',`sort_id` int(11) DEFAULT NULL COMMENT '所屬欄目Id',`title` varchar(200) DEFAULT NULL COMMENT '標(biāo)題',`content` longtext COMMENT ' 內(nèi)容',`create_time` date DEFAULT NULL COMMENT '創(chuàng)建時間',`update_time` date DEFAULT NULL COMMENT '修改時間',`title_status` int(11) DEFAULT NULL COMMENT '文章狀態(tài)',PRIMARY KEY (`title_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;PS:需要注意的是，內(nèi)容一定選longtext類型，以免報長度不夠錯誤。
獲取富文本編輯器內(nèi)容
接下來，我們模擬一段web端傳過來的內(nèi)容，請點(diǎn)擊layui進(jìn)行模擬：
點(diǎn)擊獲取編輯器內(nèi)容，我們就可拿到該段字符串：
那么，問題就來了，該同事實(shí)在不理解為什么前端讀取該段內(nèi)容，就能按上圖格式展示。我們建一個簡單的html，并把該段內(nèi)容放在div標(biāo)簽中，用瀏覽器打開：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Insert title here</title> </head> <body><div><p><b>1、什么是Vue?</b></p><p>vue真的太好用了，是前后段分離必不可少的開發(fā)框架之一……</p><p><br></p><p><i><u>2、Vue能干什么？</u></i></p><p>模擬數(shù)據(jù)</p><p><br></p></div> </body> </html>雙擊，可以發(fā)現(xiàn)，正常按照格式顯示（其實(shí)這東西并不難理解，div顯示塊，瀏覽器會自動編譯html）：
后端數(shù)據(jù)處理
在實(shí)際編程中，我們需要把html的標(biāo)簽特殊字符轉(zhuǎn)換成普通字符，用的時候再轉(zhuǎn)出來，主要用以下工具類：
public class TestFuWenBen {public static void main(String[] args) {String html = "<p><b>1、什么是Vue?</b></p><p>vue真的太好用了，是前后段分離必不可少的開發(fā)框架之一……</p><p><br></p><p><i><u>2、Vue能干什么？</u></i></p><p>模擬數(shù)據(jù)</p><p><br></p>"; // 前端傳過來的富文本內(nèi)容String temp = HtmlUtils.htmlEscapeHex(html);System.err.println("存數(shù)據(jù)庫=\r\n" + temp);String returnHtml = HtmlUtils.htmlUnescape(temp);System.out.println("回調(diào)===\r\n" + returnHtml);} }總結(jié)
以上是生活随笔為你收集整理的富文本编辑器内容存储至Mysql的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ubuntu下，远程访问服务器，路径只显
- 下一篇： SQL标准语句