Laravelでwordpressのようなビジュアルエディタを作る方法

今回はLaravelを使ってwordpressのようなビジュアルエディタを作ってみようという内容になっています。

さすがにブロックエディタのGutenbergほどの機能はありませんが、最低限HTMLがわからない人がブログをアップできるくらいにはなります。

それくらいはないとCMSとして利用しにくいですからね。

ckeditorでビジュアルエディタが簡単に作れる
1. フォームの作成
2. layouts.appの修正

ckeditorでビジュアルエディタが簡単に作れる

composerを使ってckeditorをインストールします。

$ composer require unisharp/laravel-ckeditor

次に、config/app.phpに追記します。

'providers' => [

        ・
        ・ 省略
        ・

        //追記
        Unisharp\Ckeditor\ServiceProvider::class,
],

コマンドを打ちます。

$ php artisan vendor:publish --tag=ckeditor

これでckeditorが使えるようになりました。

フォームの作成

laravelのauth機能で作った管理画面にckeditorのエディタを作成していきます。

なのでデザインはauth機能で作られたものを、まるっと踏襲していきますので。

resources/views/admin/post/create.blade.phpにviewを作成します。

@extends(‘layouts.app’)をそのまま利用して、@section(‘ckeditor-content’)を追加してフォームを作成せします。

@extends('layouts.app')

@section('ckeditor-content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">新規追加</div>
                <div class="card-body">
                <form action="/admin/post" method="post">
                    @csrf
                    <div class="form-group">
                        <label for="title">タイトル</label>
                        <input class="form-control" type="text" name="title" value="{{old('title')}}">
                        <p>{{$errors->first('title')}} </p>
                    </div>
                    <div class="form-group">
                        <label for="content">本文</label>
                        <textarea class="form-control" name="content">{{old('content')}}</textarea>
                        <p>{{$errors->first('content')}} </p>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-block btn-info">公開する</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

次にjsを追加するために@section(‘add-js’)を追加します。

CKEDITOR.replaceにはビジュアルエディタを利用したいtextareaのname属性を設定します。

@section('add-js')
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace('content');
</script>
@endsection

layouts.appの修正

resources/views/app.blade.phpに先程作成したセクションを追加していきます。

#appのdivに@yield(‘ckeditor-content’)を入れてしまうと表示されないので、外に出します。

そして、</body>の直前に@yield(‘add-js’)を入れたら完成です。

参考までにこんな感じになります。

    ・
    ・ 省略
    ・
    </div><!--//#app-->

    @yield('ckeditor-content')
    
    @yield('add-js')
</body>
</html>

フォームやデータベースへの保存処理は、こちらの記事に詳しく記述していますので、ご参考までに。
→ https://liberty-dock.com/business_post/53048/