How to Integrate and Use CKEditor (WYSIWYG) in Laravel 10

How to Integrate and Use CKEditor (WYSIWYG) in Laravel 10

If you want to use Ckeditor in Laravel application. So In this tutorial, you will learn how to install and use CKEditor in Laravel 10.

How to Integrate and Use CKEditor (WYSIWYG) in Laravel 10

By using the following steps, you can install and use CKEditor in laravel 10 apps:

  • Step 1: Setup New Laravel 10 Project
  • Step 2: Setup Database with Laravel Project
  • Step 3: Create Model & Migration For Post Table
  • Step 4: Add Fillable Property in Model
  • Step 5: Define Routes
  • Step 6: Create a Controller File
  • Step 7: Create Blade Views File
  • Step 8: Start Development Server

Step 1: Setup New Laravel 10 Project

First of all, Install fresh latest Laravel 10 app. So open the terminal or command prompt.

Then execute the below-given command into it to install the fresh new step of laravel.

 composer create-project --prefer-dist laravel/laravel Blog

Step 2: Setup Database with Laravel Project

Once you have installed laravel project on your server. Then you need to configure your database with your apps.

So, visit your app root directory and find .env file. Then configure database details as follows:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3: Create Model & Migration For Post Table

Open again your command prompt or terminal. And then execute the following command into it to create model and migration file:

php artisan make:model Post -m

After that, open create_posts_table.php file inside /database/migrations/ directory. And then update the function up() with following code:

    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

Once you have updated up function in migration file. Now, you need to open again command prompt and run the following command to create tables in database:

php artisan migrate

Step 4: Add Fillable Property in Model

In this step, you need to add the fillable property in Post model, which is located inside app/models directory:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;
    
    protected $fillable = [
        "title",
        "body"
    ];
}

Step 5: Define Routes

In this step, you need to define the following routes on the web.php file, which is located inside the routes directory:

<?php
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

Route::get('posts', [PostController::class, "index"]);
Route::get("create", [PostController::class, "create"]);
Route::post('store', [PostController::class, "store"]);

Step 6: Create a Controller File

In this step, you need to create the controller.

So open command prompt or terminal and execute the following command into it to create controller file.

cd your project root directory
//run the command

php artisan make:controller PostController

Once you have executed the above-given command. Now open this controller file and addthe below code into this:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    
    public function index() {

        $posts =  Post::orderBy("id", "desc")->paginate(5);

        return view("posts", compact("posts"));
    }


    // Create Post 
    public function create() {

        return view("create");
    }


    public function store(Request $request) {

        $post = [  "title"  =>  $request->title,
                    "body" => $request->body
                ];
      
        $post  =  Post::create($post);

        return back()->with("success", "Post has been created");
    
    }
}

Step 7: Create Blade Views File

In this step, Visit resource/views directory and create two files name posts.blade.php and create.blade.php file.

First of all, create a blade view file name posts.blade.php and update the following code into it:

<!doctype html>
<html lang="en">
  <head>
    <title> Laravel 10 Posts List For CKEditor Example </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        table td p {
            word-break: break-all;
        }
    </style>
  </head>
  <body>
      <div class="container mt-4">
        <div class="row">
            <div class="col-xl-8">
                <h3 class="text-right"> Laravel 10 CKEditor Integration Example</h3>
            </div>

            <div class="col-xl-4 text-right">
                <a href="{{url('create')}}" class="btn btn-primary"> Add Post </a>
            </div>
        </div>

        @if(count($posts) > 0)
          <div class="table-responsive mt-4">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th> Id </th>
                        <th style="width:30%;"> Title </th>
                        <th> Decription </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($posts as $post) 
                        <tr>
                            <td> {{ $post->id }} </td>
                            <td> {{ $post->title }} </td>
                            <td> {!! html_entity_decode($post->body) !!} </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
          </div>

          {{ $posts->links() }}
        @endif
      </div>      

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Then create create.blade.php file and update the following code into it:

<!doctype html>
<html lang="en">
  <head>
    <title> Laravel 10 Install CKEditor Example </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    {{-- CKEditor CDN --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

  </head>
  <body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-xl-12 text-right">
                <a href="{{ url('posts') }}" class="btn btn-danger"> Back </a>
            </div>
        </div>

        <form action="{{url('store')}}" method="POST">
            @csrf
            <div class="row">
                <div class="col-xl-8 col-lg-8 col-sm-12 col-12 m-auto">

                    @if(Session::has('success'))
                        <div class="alert alert-success alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            {{ Session::get('success') }}
                        </div>
                    @elseif(Session::has('failed'))
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            {{ Session::get('failed') }}
                        </div>
                    @endif

                    <div class="card shadow">

                        <div class="card-header">
                            <h4 class="card-title"> Laravel 10 Install CKEditor Example Tutorial </h4>
                        </div>

                        <div class="card-body">
                            <div class="form-group">
                                <label> Title </label>
                                <input type="text" class="form-control" name="title" placeholder="Enter the Title">
                            </div>
                            <div class="form-group">
                                <label> Body </label>
                                <textarea class="form-control" id="body" placeholder="Enter the Description" name="body"></textarea>
                            </div>
                        </div>

                        <div class="card-footer"> 
                            <button type="submit" class="btn btn-success"> Save </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
        ClassicEditor
            .create( document.querySelector( '#body' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Note that, Don’t forget to add the following cdn file to your blade view file:

    <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

Step 8: Start Development Server

Now, open command prompt or terminal and execute the following command on it to start the development server:

php artisan serve

Then open browser and fire the following url on it:

http://127.0.0.1:8000/create

Conclusion

How to install and use CKEditor in Laravel 10 tutorial, You have learned how to install and use CKEditor in Laravel 10.

Recommended Laravel Posts

If you have any questions and suggestions, please use the comment box.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *