Laravel CKEditorの導入と使い方

2024-02-09 07:25 Laravel CKEditor ブログ投稿
  1. パッケージのインストール: まず、Laravel CKEditorパッケージをインストールする必要があります。以下のコマンドを使用して、パッケージをインストールします。
composer require unisharp/laravel-ckeditor
  1. 設定ファイルの公開: 次に、CKEditorの設定ファイルを公開する必要があります。以下のコマンドを使用して、設定ファイルを公開します。
php artisan vendor:publish --tag=ckeditor

このコマンドを実行すると、config/ckeditor.phpという設定ファイルが生成されます。

  1. ビューファイルの更新: テキストエリアを含むビューファイルを更新して、CKEditorを使用できるようにします。例えば、ブログ投稿の作成画面を想定して、resources/views/posts/create.blade.phpファイルを編集します。
<!DOCTYPE html>
<html>
<head>
    <!-- 省略 -->
</head>
<body>
    <form action="/posts" method="POST">
        @csrf
        <textarea name="content" id="content"></textarea>
    </form>
    <script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
    <script>
        CKEDITOR.replace('content');
    </script>
</body>
</html>

上記の例では、textarea要素にcontentという名前を設定し、その後にスクリプトを追加してCKEditorを適用しています。

  1. 投稿の保存: 最後に、ブログ投稿を保存するコントローラーのロジックを更新します。以下は、PostsControllerクラスのstoreメソッドの一部です。
use Illuminate\Http\Request;
use App\Models\Post;
class PostsController extends Controller
{
    public function store(Request $request)
    {
        $post = new Post;
        $post->content = $request->input('content');
        // 他の投稿データの処理
        $post->save();
        return redirect('/posts');
    }
}

上記の例では、contentフィールドにCKEditorで作成されたコンテンツを保存しています。

以上が、Laravel CKEditorの導入と使い方の基本的な手順です。これにより、ブログ投稿の作成画面でCKEditorを利用することができます。さらに、CKEditorには多くのカスタマイズオプションや機能がありますので、公式ドキュメントを参照して詳細を学ぶことをおすすめします。