無料のリッチテキストエディタsummernoteをLaravelに搭載する方法

Laravel とリッチテキストエディタ
スポンサーリンク

Laravelに搭載できるリッチテキストエディタ(WYSISYGエディタ)はいくつか種類があります。

今回はそのなかで、無料で使えるsummernote(サマーノート)を紹介します。

サンプルページはこちらをご覧ください。(保存機能はつけていません)。

今回の記事ではsummernoteのフォームを通じて投稿されたデータを、MySQLデータベースに保存する方法まで解説しますね。

じゅんこ
じゅんこ

すべて手順を説明したところ、長ーい記事になっちゃいました。

気長にお付き合いください。

スポンサーリンク

Summernoteでフォームを作る

まずはLaravelのプロジェクトの準備をしましょう。

次のような流れで進めていきます。

  1. Laravelの環境構築
  2. モデルとデータベースの作成
  3. ルートの作成
  4. コントローラーの作成
  5. ビューファイルの作成

すでに搭載可能な場合には、この部分は飛ばしてください。

1.Laravelの環境構築

Laravelのインストールを行います。

こちらのページを参考にしてください。

2.モデルとマイグレーションファイルでテーブルを作成

モデルファイルとデータベースを作ります。

下記のコマンドを入力してください。今回はArticleという名前のモデルを作成します。

モデルの編集

appフォルダの直下(Laravel8では app/Modelフォルダの中)にモデルファイル Article.phpができています。

下記のようにコードを書き加えます。

protected $quarded =[] は、フォームに入れた値でデータベースを更新できるようにするためのコードです。

編集後は、下記のようになります。

マイグレートを実行してテーブルを作成

次にdatabase/migrationファイルを開き、下記のように入力します。

マイグレートを実行します。

PHPMyAdminにログインして、articlesテーブルが作成されているか確認してみてください。

3.ルートの作成

routes/web.phpファイルを開きます。

こちらは、ルートファイルを指定するファイルになります。

次のふたつのルートを指定しておきましょう。

4.コントローラーの作成

ルートから処理を受け渡されるコントローラーを作ります。

まずは次のコマンドでコントローラーファイルを作成しましょう。

app/Http/Controllers/ArticleControllerファイルを開きます。

ファイルの上に、下記を入れます。

class名以下に、次のように、showとstoreのコントローラーを作成しておきます。

全体のコードは次のようになります。

5.ビューファイルの作成

次にビューファイルを作成します。

resource/viewフォルダの中にpostsフォルダを作り、この中にcreate.blade.phpファイルを作成します。

ファイルの中に、次のようなフォームをいれておきます。

textareの【id】に【summernote】と指定するようにしてください。

ご留意事項

なお、下記のようにテンプレートファイルを組み込んでいる場合は、まずは、上記のようにテンプレートを外した形で試してみてください。

テンプレートファイル内で読み込んでいるjavaScriptとバッティングしたりして、うまく動作しない場合があるためです。

まずはテンプレートなしで動かしてみて、うまくいったら、テンプレートも組み込んでみてくださいね。

*上記は、下記の公式マニュアルを参考に、Bootstrap4を使う方法を紹介しています。

6.フォームをテストしてみる

それでは、Laravelのページを確認してみましょう。

【ドメイン名/posts/create】を開きます。

下記のように表示されていれば、成功です。

実際に投稿をしてみます。

画像を挿入したり書式を付けたりできます。

7.投稿後にデータベースを確認する

投稿後、phpMyAdminにログインして、きちんと保存されているかチェックしてみましょう。

こんなふうにHTMLのタグ入りで保存されていれば成功です。

summernoteの投稿内容を表示させる

それでは次に、データベースに投稿した内容を表示させるファイルも作ってみます。

1.ルートの作成

routex/webファイルに下記を追加します。

2.コントローラーの作成

ArticleContollerファイルに下記のshowメソッドを追加します。

3.表示用ファイルを作る

保存したデータを表示させるファイルを作ります。

resources/view/postsの中にview.blade.phpファイルを作ります。

下記のコードを入力します。

上記のコードでは、【body】部分は {!!$article->body!!} としています。

これは、エスケープ処理をしないために行っています。

通常は、エスケープ処理のはめに {{}}で値を囲みますが、こうしてしまうと、HTMLのコードが無効になってしまいます。

そこで今回は、エスケープ処理無効の設定にしています。

4.URLをチェックする

それでは、Laravelのページを確認してみましょう。

【ドメイン名/posts/view】を開きます。

下記のように表示されていれば、成功です。

Summernoteのメリットとデメリット

最後に、summernoteのメリット・デメリットをまとめておきます。

【summernoteのメリット】

・無料である
・インストールせずとも手軽に使える

【summernoteのデメリット】

画像がコードとしてデータベースに保存される

コードで保存すると使いにくい上、データ量がすごいことになってしまいます。

本格的に画像を使うなら、GitHubなどにファイルマネージャーがあるので、これらを組み合わせて使う手があります。

コードが組める方なら、自分でも作れるかと思います。

わたしはがんばって、自分でsummernoteに画像保存機能を追加しましたが、正直、結構メンドウ。

方法は、また別の記事にしていきますね。

summernote以外のリッチテキストエディタについては、こちらの記事をどうぞ。

 

★2021/05/17 追加しました:

【ご留意事項】を追加しました。テンプレートを読み込んでエラーになった場合は、テンプレートなしで試してみてください。

Laravel とリッチテキストエディタ

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中!
会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

【個別サポート実施中】

「本ブログに記載の方法を試してみたけれど、うまくいかない」「コードを見てほしい」という方のために、有償でメールサポートいたします。以下のボタンをクリックして相談フォームにアクセスして下さい。

詳しく見る

Twitter始めました。
スポンサーリンク
40代からプログラミング!

コメント

タイトルとURLをコピーしました