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

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

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

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

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

じゅんこ

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

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

Summernoteでフォームを作る
summernoteの投稿内容を表示させる
Summernoteのメリットとデメリット

Summernoteでフォームを作る

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

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

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

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

1.Laravelの環境構築

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

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

Laravelのインストールと環境構築・Windows編【Laravel入門講座】

Windows環境でXAMPP(ザンプ）を使ったLaravelのインストール・開発環境構築方法を解説します。最初はインストールするものも多いので、すごくスムーズに進められたとして、2～3時間は見ておいたほうが良いでしょう。 ...

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

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

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

php artisan make:model Article -m

1	php artisan make:model Article -m

モデルの編集

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

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

    protected $guarded =[];

1	protected $guarded =[];

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

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

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

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

            $table->id();
            $table->string('title');
            $table->longText('body');
            $table->timestamps();

$table->id();

$table->string('title');

$table->longText('body');

$table->timestamps();

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

>php artisan migrate

1	>php artisan migrate

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

3.ルートの作成

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

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

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

    Route::post('/posts/store', 'ArticleController@store')->name('posts.store');
    Route::get('/posts/create', 'ArticleController@create')->name('posts.create');

1 2	Route::post('/posts/store', 'ArticleController@store')->name('posts.store'); Route::get('/posts/create', 'ArticleController@create')->name('posts.create');

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

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

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

php artisan make:controller ArticleController

1	php artisan make:controller ArticleController

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

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

use App\Article;

1	use App\Article;

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

    public function create(){

        return view('posts.create');
    }

    public function store(Request $request){
        $article=new Article();
        $article->fill([
            'title'=>request('title'),
            'body'=>request('body')
        ]);
        $article->save();
    }

public function create(){

return view('posts.create');

}

public function store(Request $request){

$article=new Article();

$article->fill([

'title'=>request('title'),

'body'=>request('body')

]);

$article->save();

}

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

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

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

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

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

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

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
@if(session('created'))
<div class="alert alert-success">{{session('created')}}</div>
@endif
<div class="container">
    <div class="row">
        <div class="col-md-7 offset-3 mt-4">
            <div class="card-body">

                <form method="post" action="{{route('posts.store')}}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="title">件名</label>
                        <input type="text" name="title" class="form-control" id="title" placeholder="Enter Title">
                    </div>
                    <div class="form-group">
                        <label for ="body">投稿本文</label>
                        <textarea class="form-control" name="body" id="summernote" cols="30" rows="10"></textarea>
                    </div>
                    <button type=”submit” class="btn btn-danger btn-block">保存</button>
                </form>
                
            </div>
        </div>
    </div>
</div>
<script>
    $('#summernote').summernote({
      placeholder: 'Hello Bootstrap 4',
      tabsize: 2,
      height: 100
    });
  </script>
</body>
</html>

<head>

<title>Summernote with Bootstrap 4</title>

@if(session('created'))

<div class="alert alert-success">{{session('created')}}</div>

@endif

@csrf

</div>

</div>

</form>

</div>

$('#summernote').summernote({

placeholder: 'Hello Bootstrap 4',

tabsize: 2,

height: 100

});

</script>

</body>

</html>

ご留意事項

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

@extends('layouts.app')
@section('content')
 コンテンツの中身
@endsection

@extends('layouts.app')

@section('content')

コンテンツの中身

@endsection

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

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

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

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

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

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

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

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

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

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

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

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

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

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

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

1.ルートの作成

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

Route::get('/posts/view', 'ArticleController@show')->name('posts.show');

1	Route::get('/posts/view', 'ArticleController@show')->name('posts.show');

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

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

    public function show(){
        $articles=Article::all();
        return view('posts.view', compact('articles'));
    }

public function show(){

$articles=Article::all();

return view('posts.view', compact('articles'));

}

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

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

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

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

@foreach($articles as $article)

<!-- Title -->
<h1 class="mt-4">{{$article->title}}</h1>
<hr>
<!-- Date/Time -->
<p>{{$article->created_at}}</p>
<hr>
<!-- Preview Image -->
<img class="img-fluid rounded" src="{{$article->post_image}}" alt="">
<hr>
<!-- Post Content -->
<p>{!!$article->body!!}</p>
@endforeach