springboot后端存儲富文本內容的方法是什么

這篇文章主要講解了“springboot后端存儲富文本內容的方法是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“springboot后端存儲富文本內容的方法是什么”吧！

基本知識

springboot：后端快速應用開發框架。

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

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

基本思路

獲取tinymce富文本編輯器的內容（html形式），通過axios發送到后端，后端接收到內容后直接存儲到數據庫。

步驟

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

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

2、獲取富文本編輯器的內容，并發送至后端

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

html內容如下：

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

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

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

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

3、后端在數據庫創建表

注意：存儲富文本的內容的數據類型為longtext，防止內容過長無法保存

存儲結果如下：

4、后端編寫接收富文本內容的接口

@ApiOperation("發表新聞")
    @PostMapping("/news")
    public Result updateNews(@RequestParam Long userId,@RequestParam Integer categoryId,@RequestParam String title,@RequestParam String context){
        System.out.println("發表新聞"+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;
    }

感謝各位的閱讀，以上就是“springboot后端存儲富文本內容的方法是什么”的內容了，經過本文的學習后，相信大家對springboot后端存儲富文本內容的方法是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！