Springboot バックエンドにリッチ テキスト コンテンツを保存する方法は何ですか?

基礎知識

springboot: バックエンドの高速アプリケーション開発フレームワーク。

tinymce: シンプルなリッチ テキスト エディター。

base64: Base64 は、インターネット上で 8 ビット バイトコードを送信するための最も一般的なエンコード方式の 1 つで、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 形式です。ただし、「」の場合、ここでの画像パスは、画像のアップロード後にサーバーに保存されているパスに書き換える必要があります。

3. バックエンドはデータベースにテーブルを作成します

注: リッチ テキスト コンテンツを保存するためのデータ型は、コンテンツが長すぎて保存できなくなることを防ぐためにロングテキストです

ストレージ結果は次のとおりです:

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 バックエンドにリッチ テキスト コンテンツを保存する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。