今回はLaravel上でtinyMCEを適用する方法を紹介します!
tinyMCEを設置と読み込み
まずはtinyMCEの公式サイトで、本体をダウンロードします。
https://www.tiny.cloud/get-tiny/custom-builds/
① デフォルトで全てのチェックがついていますが、気にせずダウンロードして解凍します。
② 解凍したファイル一式を、Laravelのpublicディレクトリ内の任意の場所に入れましょう。
③ bladeファイルの<head></head>内で、tinymce.min.jsを読み込みます。
tinyMCEの適用
textareaにtinyMCEを適用するには、以下のスクリプトを書きます。
ツールバーの設定など、詳しい設定方法はこちらをご覧ください。
tinymce.init({ selector: 'textarea', });
画像アップロード設定
tinyMCEでは、編集中に選択した画像をリアルタイムでサーバー上にアップロードする必要があるので、そのための設定を紹介します。
僕は以下のツールをインストールしました。
https://github.com/petehouston/laravel-tinymce-simple-imageupload
Installationにある通り、Laravel5.5以上とそれ以前の場合で、インストールするバージョンが違うようです。
Laravel 5.5+の場合
$ composer require "petehouston/laravel-tinymce-simple-imageupload:~1.3"
5.5以前のLaravelの場合
$ composer require "petehouston/laravel-tinymce-simple-imageupload:~1.1"
自分のバージョンにあったものをインストールしましょう。
laravelバージョン5.4以前の場合、config/app.phpに以下の記述をする必要があります。
'providers' => [
...
Petehouston\Tinymce\TinymceServiceProvider::class,
]
インストールが終わったら、tinyMCEを適用したフォームブレード内に、以下のタグを挿入します。
@include('mceImageUpload::upload_form')
先程設定したスクリプトに、以下を追記すれば完了です。
tinymce.init({ // .. your config here // ここから . . . relative_urls: false, file_browser_callback: function(field_name, url, type, win) { // trigger file upload form if (type == 'image') $('#formUpload input').click(); } // ここまで追加 });
動作確認
動作確認として、tinyMCEを導入したtextareaから編集を行ってみましょう!
選択した画像は、public/imgに保存されるはずです。