@yengineer

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

spring bootでリッチテキストエディタを使用したい

解決したいこと

spring bootでリッチテキストエディタで入力されたデータを登録したいです。
登録処理をするさいにcontentのデータが空になり登録処理ができない状況です

・画面側で入力したテキストエディタの情報をサーバー側に受け渡す方法
・entityでのデータ型の設定方法
・mysqlで登録したいのですが、データ型は何を利用すればいいか

以上です、お願いします。

使用したリッチテキストエディタになります。
https://richtexteditor.com/Demos/

・画面側の表示になります。
image.png

■エンティティ

@Entity
public class Item {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column
    private int id;
    
    //タイトル
    @Column
    private String title;
    
    //コンテンツ
    @Column
    private String content;
    
    //ジャンルID
    @Column(name = "genre_id")
    private int genreId;

}

■サーバーサイド側

@Controller
public class Edit_ItemController {
	
	//editページ
	private static final String EDIT_ITEM = "item/edit_item";
	
	//itemテーブル用のリポジトリを定義
	@Autowired private ItemRepository itemRep;
	//genreテーブル用のリポジトリを定義
	@Autowired private GenreRepository genreRep;
	
	//edit_itemページの表示処理
	@RequestMapping("/edit_item")
	public String edit_item(
		@RequestParam("id") int id, 
		Model model) {
		
		//Itemインスタンス生成を定義
		Item item = new Item();
		
		//更新の場合
		if (id != 0) {				
			//更新 指定のレコードが入る
			item = itemRep.findById(id).orElse(null);				
		}
		
		List<Genre> genreAll = genreRep.findAll();
		
		//genreデータを出力
		model.addAttribute("genreAll", genreAll);	
		// itemオブジェクトをモデルに追加
	    model.addAttribute("item", item);
		
		return EDIT_ITEM;
	}

	//新規・編集処理
	@RequestMapping("/disp_edit_item")
	public String disp_edit_item(
			HttpServletRequest req,			
			//POST時に自動的に入力チェック
			@Validated @ModelAttribute Item item,
			//リダイレクト
			RedirectAttributes redirectAttrs,
			//データベース
			Model model) {

        // データベースに保存
        itemRep.save(item);	        
        
		//モデルに追加
	    model.addAttribute("itemAll",itemAll);	    
	    // 更新後の一覧画面にリダイレクト
	    return "redirect:/items";
		
	}
	
}

■画面側

<main>
    <!-- item入力エリア-->
    <div class="input-area">

       <!-- 新規・更新処理 -->
       <form th:action="@{/disp_edit_item}" th:object="${item}" method="post">
            <!-- ID -->
            <div class="input-id" style=" display: none;">				      
              <label>ID: <input type="text" th:field="*{id}" /></label><br/>
            </div>

            <!--ジャンル選択-->
            <div class="input">
                <label>ジャンル名
                    <select class="genre" th:field="*{genreId}">
                        <option th:value="0">選択してください</option>
                        <option th:each="genre : ${genreAll}" th:value="${genre.id}" th:text="${genre.genreName}"></option>
                    </select>
                </label>
            </div>

            <!-- タイトル -->
            <div class="input">				      
              <label>タイトル <input type="text" th:field="*{title}" /></label><br/>
            </div>
            
            <!-- 説明 -->
            <!-- リッチテキストエディタを適用するテキストエリア -->
            <div class="input">
               <label>説明 <textarea id="content" th:src="*{content}"></textarea></label><br/>
            </div>

            
            
            
            <script>
                var editor1 = new RichTextEditor("#content");
                //editor1.setHTMLCode("Use inline HTML or setHTMLCode to init the default content.");
            </script>

            <!-- 保存ボタン -->		    
            <div class="submit-save">
                <button type="submit">保存</button>
            </div>
       </form>

    </div>	
</main>
```。
0 likes

1Answer

利用したことが無いので、詳しいことは分かりませんが、
公式ドキュメントによると、editor1.getHTMLCode()で取得できるようです。

HTMLなら、DBに保存する型は テキスト(String) ですかね?

違っていたらごめんなさい。

0Like

Your answer might help someone💌