Laravelでブログサイトを作る 18. 管理画面・記事編集の際に入力補助を(TinyMCE)

はじめに

記事を編集する際に、HTMLの入力補助を行えるようにします。
様々なライブラリが存在しますが、TinyMCEを使用します。
画像のアップロード機能を組み込むことができるので（次回解説予定）、という理由で

選定しました。

導入方法

1. JSファイルをダウンロードし、public/jsに配置する
   • CDNを使うと、日本語化で手こずる懸念と、バージョンアップに引きずられて問題が発生する可能性があるため、ファイルをダウンロードします。
2. テンプレートファイルに、JSの読み込みと初期化構文を記述する

1. JSファイルのダウンロード

ダウンロードは、コチラから可能です。
ページ中程にある「Download TinyMCE Community」から本体を、「Download Language Pack」から日本語パックをダウンロードし、解凍します。

本体は、public/jsに配置します。
その後、langディレクトリに日本語パックのja.jsを移動します。
最終的には、以下のような形です。

public/
└ js/
　 └ tinymce/
　 　 ├ lang
　 　 ｜　 └ ja.js ←日本語パックから移動
　 　 └ その他、jquery.tinymce.min.js など

テンプレート

resources/views/admin/articleEdit.blade.php
JSファイルの読み込みと、初期化についての記述を追加するだけで、便利なTinyMCEが使えるようになります。
日本語化せずにCDNを使う場合は、前述のダウンロード云々もスキップできるので、非常に簡単です。

@section('adminMain')
    {{-- 省略 --}}

    <h3>記事本文</h3>
    <textarea name="body">{{ $articleData->body ?? '' }}</textarea>

    {{-- 省略 --}}
    
    <script src="{{ asset('/js/tinymce/tinymce.min.js') }}"></script>
    <script>
        tinymce.init({
            selector:'textarea',
            language: "ja"
        });
    </script>
@endsection

参考文献

TinyMCEを設置する
https://qiita.com/nissuk/items/e31bdfa858d6c5c018c2

2022-05-23 09:00:00