spring bootでリッチテキストエディタを使用したい
Q&A
Closed
解決したいこと
spring bootでリッチテキストエディタで入力されたデータを登録したいです。
登録処理をするさいにcontentのデータが空になり登録処理ができない状況です
・画面側で入力したテキストエディタの情報をサーバー側に受け渡す方法
・entityでのデータ型の設定方法
・mysqlで登録したいのですが、データ型は何を利用すればいいか
以上です、お願いします。
使用したリッチテキストエディタになります。
https://richtexteditor.com/Demos/
■エンティティ
@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