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