Laravel WYSIWYGエディタ(Quilljs) 投稿に失敗するとエディタに入力した内容が消えてしまう。

Question

Laravel9 にWYSIWYGエディタ(Quilljs) を実装しました。

WYSIWYGエディタ(Quilljs)の内容をDBに保存する事は出来ました。
しかし、inputタグ「タイトル」未入力で投稿に失敗すると、WYSIWYGエディタ(Quilljs)の内容が消えてしまいます。

///form.blade.php

<form name="ansform" class="info-edit" method="post" action="{{ route('post.store') }}" enctype="multipart/form-data">
	@csrf
	<div class="info-edit__headding">
		<label class="info-edit__headding--title" for="title">タイトル</label>
		<input class="info-edit__headding--input" type="text" name="title" id="title" value="{{ old('title') }}">
	</div>
	<div class="info-edit__body">
		<label class="info-edit__body--title" for="body">本文</label>
		<div class="info-edit__body--txt-area" id="quill-editor_1"> </div>
		<input type="hidden" name="body" value="{{ old('body') }}">
	</div>
	<div class="info-edit__button">
		<button class="info-edit__button--submit" type="submit" name="subbtn">
			保存
		</button>
	</div>
</form>

var quill_1 = QuillEditorMake('quill-editor_1');

function QuillEditorMake(make_id) {
  var toolbarOptions; // ツールバーの機能設定
  var quill; // エディタ情報
  var themes = set_themes(); // エディタのテーマ（snow , bubble）

  // ツールバー機能の設定
  toolbarOptions = [
    //見出し
    [
      {
        header: [1, 2, 3, 4, 5, 6, false],
      },
    ],
    //フォント種類
    [
      {
        font: [],
      },
    ],
    //文字寄せ
    [
      {
        align: [],
      },
    ],
    //太字、斜め、アンダーバー
    ['bold', 'italic', 'underline'],
    //文字色
    [
      {
        color: ['red', 'blue', 'navy'],
      },
      //文字背景色
      {
        background: [],
      },
    ],
    // リスト
    [
      {
        list: 'ordered',
      },
      {
        list: 'bullet',
      },
    ],
    //インデント
    [
      {
        indent: '-1',
      },
      {
        indent: '+1',
      },
    ],
    //画像挿入
    ['image'],
    //動画
    ['video'],
    //数式
    ['formula'],
    //URLリンク
    ['link'],
  ];

  //渡ってきたID名に「#」をくっつける
  make_id = '#' + make_id;

  //エディタの情報を生成
  quill = new Quill(make_id, {
    modules: {
      //ツールバーの設定
      toolbar: toolbarOptions,
    },
    placeholder: '入力してください',
    //ツールバーのあるデザイン
    theme: themes, //'snow' or 'bubble'
  });

  return quill;
}


// テーマ設定（PCとスマホで切り替える画面幅で判定）
function set_themes() {
  var themes;
  if (window.parent.screen.width > 800) {
    themes = 'snow';
  } else {
    themes = 'bubble';
  }
  return themes;
}

//フォームを送信処理
document.ansform.subbtn.addEventListener('click', function () {
  // Quillのデータをinputに代入
  document.querySelector('input[name=body]').value = document.querySelector('#quill-editor_1').innerHTML;
  // 送信
  document.ansform.submit();
});

form.blade.phpで<input type="hidden" name="body" value="{{ old('body') }}">とすれば、投稿に失敗しても情報が渡されるかと思ったのでがだめでした。

投稿に失敗してもWYSIWYGエディタ(Quilljs) の情報を残す方法を教えてください。

Answer 1

以下のように入力情報をリロード時でも保持できるようにname="body_delta"を持つinputを作成。
DBにbody_deltaカラム(Json)を作成。

<div class="info-edit__body--txt-area" id="quill-editor_1"></div>
  <input type="hidden" name="body" value="{{ old('body') }}">
  <input type="hidden" name="body_delta" value="{{ old('body_delta') }}">

jsファイルに以下のようにbody_deltaの値をセットするコードを記述。

    // QuillのJSONデータ（Delta）をinputにセットする
    bodyDelta.value = JSON.stringify(quill_1.getContents());

以上でLaravel WYSIWYGエディタ(Quilljs) 投稿に失敗するとエディタに入力した内容が消えてしまう。問題解決しました。