LaravelでCKEditorを使用する方法


  1. CKEditorのインストールと設定:

    • LaravelプロジェクトにCKEditorをインストールするには、Composerを使用します。ターミナルで以下のコマンドを実行します。
      composer require ckeditor/ckeditor
    • インストールが完了したら、config/app.phpファイルのproviders配列に以下の行を追加します。
      'providers' => [
       // 他のプロバイダー
       CKSource\CKFinder\CKFinderServiceProvider::class,
      ]
    • 同じファイルのaliases配列に以下の行を追加します。
      'aliases' => [
       // 他のエイリアス
       'CKFinder' => CKSource\CKFinder\Facades\CKFinder::class,
      ]
    • CKEditorの設定ファイルを生成するために、ターミナルで以下のコマンドを実行します。
      php artisan vendor:publish --tag=ckeditor
  2. ブログ投稿フォームの作成:

    • routes/web.phpファイルに以下のルートを追加します。
      Route::get('/posts/create', 'PostController@create');
      Route::post('/posts', 'PostController@store');
    • app/Http/Controllers/PostController.phpファイルを作成し、以下のコードを追加します。

      namespace App\Http\Controllers;
      
      use Illuminate\Http\Request;
      use App\Models\Post;
      
      class PostController extends Controller
      {
       public function create()
       {
           return view('posts.create');
       }
      
       public function store(Request $request)
       {
           $validatedData = $request->validate([
               'title' => 'required',
               'content' => 'required',
           ]);
      
           Post::create($validatedData);
      
           return redirect('/posts');
       }
      }
    • resources/views/posts/create.blade.phpファイルを作成し、以下のコードを追加します。
      <form action="/posts" method="POST">
       @csrf
       <input type="text" name="title" placeholder="タイトル">
       <textarea name="content" placeholder="内容"></textarea>
       <script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
       <script>
           CKEDITOR.replace('content');
       </script>
       <button type="submit">投稿する</button>
      </form>
  3. 投稿の保存と表示:

    • app/Models/Post.phpファイルを開き、以下のコードを追加します。

      namespace App\Models;
      
      use Illuminate\Database\Eloquent\Model;
      
      class Post extends Model
      {
       protected $fillable = ['title', 'content'];
      }
    • routes/web.phpファイルに以下のルートを追加します。
      Route::get('/posts', 'PostController@index');
    • app/Http/Controllers/PostController.phpファイルのPostControllerクラスに以下のメソッドを追加します。

      public function index()
      {
       $posts = Post::all();
      
       return view('posts.index', compact('posts'));
      }
    • resources/views/posts/index.blade.phpファイルを作成し、以下のコードを追加します。

      <h1>ブログ投稿一覧</h1>
      
      @foreach ($posts as $post)
       <h2>{{ $post->title }}</h2>
       <p>{!! $post->content !!}</p>
      @endforeach

これで、LaravelでCKEditorを使用してブログ投稿を作成し、保存・表示することができます。適宜、ルートやビューファイルをカスタマイズしてください。