快捷導(dǎo)航

springboot后端存儲富文本內(nèi)容的思路與步驟(含圖片內(nèi)容)

更新時(shí)間：2023年04月17日 11:09:09 作者：野er

在所有的編輯器中,大概最受歡迎的就是富文本編輯器和MarkDown編輯器了,下面這篇文章主要給大家介紹了關(guān)于springboot后端存儲富文本內(nèi)容的思路與步驟的相關(guān)資料,需要的朋友可以參考下

基本知識

springboot：后端快速應(yīng)用開發(fā)框架。

tinymce：簡單的富文本編輯器。

base64：Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一，Base64就是一種基于64個(gè)可打印字符來表示二進(jìn)制數(shù)據(jù)的方法。編碼規(guī)則：把3個(gè)字節(jié)變成4個(gè)字節(jié);每76個(gè)字符加一個(gè)換行符;最后的結(jié)束符也要處理。對于圖片來說，base64 編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址。

基本思路

?獲取tinymce富文本編輯器的內(nèi)容（html形式），通過axios發(fā)送到后端，后端接收到內(nèi)容后直接存儲到數(shù)據(jù)庫。

步驟

1、前端配置好tinymce富文本編輯器

?配置tinymce富文本編輯器的過程參見官方文檔：https://www.tiny.cloud/docs/tinymce/6/

我配置好的富文本編輯器效果如下：

2、獲取富文本編輯器的內(nèi)容，并發(fā)送至后端

?注意這里有一個(gè)問題就是圖片該如何傳輸，我這里是直接獲取base64格式的圖片后直接上傳，這是一個(gè)比較簡單的方法。

html內(nèi)容如下：

可以看到圖片的內(nèi)容極其長，這是base64格式編碼導(dǎo)致的，不過好處是當(dāng)前端請求富文本內(nèi)容時(shí)，如果一篇文章中有很多圖片的話，瀏覽器不用多次發(fā)起圖片請求，而是圖片和文字一起發(fā)送到了前端。

關(guān)于圖片上傳到富文本編輯器后轉(zhuǎn)為base64格式的代碼參考：http://chabaoo.cn/article/281350.htm

前端通過axios將富文本發(fā)送給后端的代碼：

 axios({
        method: 'post',
        url: 'http://localhost:8081/users/news',
        data: {
          "categoryId": 1,
        "userId": 1,
        "title": "震驚?。?0歲老頭竟然。。。。",
        "context": tinymce.activeEditor.getContent()
        }
      }).then((res)=>{
        console.log(res.data)
      })

?還有一個(gè)方法是圖片內(nèi)容和文字內(nèi)容分開上傳，內(nèi)容依舊是html格式，但是“<img src=“圖片路徑”>”，這里的圖片路徑需要重寫為圖片上傳后存儲在服務(wù)器上的路徑。

3、后端在數(shù)據(jù)庫創(chuàng)建表

?注意：存儲富文本的內(nèi)容的數(shù)據(jù)類型為longtext，防止內(nèi)容過長無法保存

存儲結(jié)果如下：

4、后端編寫接收富文本內(nèi)容的接口

@ApiOperation("發(fā)表新聞")
    @PostMapping("/news")
    public Result updateNews(@RequestParam Long userId,@RequestParam Integer categoryId,@RequestParam String title,@RequestParam String context){
        System.out.println("發(fā)表新聞"+context);
        Result result = new Result();
        News news = new News(categoryId,userId,title,context);
        boolean flag = newsService.save(news);
        if (!flag){
            result.setFlag(false);
            return result;
        }
        result.setFlag(true);
        return result;
    }

這里我只給了controller的代碼，還有service、dao的代碼相信有基礎(chǔ)的同學(xué)可以自行編寫。

總結(jié)

到此這篇關(guān)于springboot后端存儲富文本內(nèi)容的思路與步驟的文章就介紹到這了,更多相關(guān)springboot后端存儲富文本內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

springboot后端存儲富文本內(nèi)容的思路與步驟(含圖片內(nèi)容)

目錄

基本知識

基本思路