【Laravel】CKEditorを使ってWYSIWYGエディタで投稿する！

3973 ワード
PHP Laravel CKEditor PHP テキストリンク

はじめに

よし、ブログ投稿画面を作るぞ！
まずは form をつくって～...

よし出来た！
...けど文字装飾とか確認できないし、何より味気ないなぁ...

→CKEditor導入後

これこれ！これをやりたかったんだ！

ちなみにWYSIWYGとは"What You See Is What You Get"の略で、
編集中のデータがそのまま画面に表示されるよといった意味合いです。

開発環境

Laravel 8.45.1
PHP 7.4.7

導入

なんの変哲も捻りもないフォームに対して、
①input textarea にクラスを付与
②ckeditorのスクリプト読み込み
この２件で再現可能です！

edit.blade.php
<form method="POST" action="{{ route('posts.store') }}">
    @csrf
    <div >
        <label for="title_post">Title</label>
        <div>
            <input type="text-input" name="title">
        </div>
    </div>

    <div style="width:50%">
        <label for="text-input">Text</label>
        <div>
            // class="ckeditor"を付与
            <textarea class="ckeditor" name="text"></textarea>
        </div>
    </div>

    <div>
        <button type="submit">Post</button>
    </div>
</form>

// 外部スクリプトの読み込み
<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

以上です、簡単！
パッケージをダウンロードしたい場合は公式からダウンロード可能です。
https://ckeditor.com/ckeditor-4/download/

使い方


このように直感的に作成が可能です。

POSTデータはHTML構造で格納されます。
公式ページでデモ操作が可能ですので、お試しあれ！
https://ckeditor.com/ckeditor-4/demo/

終わりに

今回はCKEditorを利用してWYSIWYGエディタを導入する方法をご紹介いたしました。
エディタ自体の装飾もできるようなので、どんなコンセプトのサイトでも気軽に導入できそうですね！