LaravelのtextareaをtinyMCEエディターにする方法【画像アップロードあり】

今回はLaravel上でtinyMCEを適用する方法を紹介します！

tinyMCEを設置と読み込み
tinyMCEの適用
画像アップロード設定
動作確認

tinyMCEを設置と読み込み

まずはtinyMCEの公式サイトで、本体をダウンロードします。

Custom HTML Builds | Trusted Rich Text Editor | TinyMCE

Custom HTML Builds. The most advanced WYSIWYG HTML editor designed to simplify website content creation.

① デフォルトで全てのチェックがついていますが、気にせずダウンロードして解凍します。

② 解凍したファイル一式を、Laravelのpublicディレクトリ内の任意の場所に入れましょう。

③ bladeファイルの<head></head>内で、tinymce.min.jsを読み込みます。

tinyMCEの適用

textareaにtinyMCEを適用するには、以下のスクリプトを書きます。

ツールバーの設定など、詳しい設定方法はこちらをご覧ください。

tinymce.init({
  selector: 'textarea',
});

画像アップロード設定

tinyMCEでは、編集中に選択した画像をリアルタイムでサーバー上にアップロードする必要があるので、そのための設定を紹介します。

僕は以下のツールをインストールしました。

GitHub - petehouston/laravel-tinymce-simple-imageupload: Simple image upload for TinyMCE in Laravel.

Simple image upload for TinyMCE in Laravel. Contribute to petehouston/laravel-tinymce-simple-imageupload development by creating an account on GitHub.

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に保存されるはずです。