Milind Daraniya

However, you can still use jQuery and integrate CKEditor in Laravel 10 by following these steps:

Step 1: Install CKEditor

You can install CKEditor using npm or include it from a CDN. In this example, we will use the CDN approach.

Add the following script tag to your Blade layout file (e.g., resources/views/layouts/app.blade.php):

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

Step 2: Include CKEditor in the Blade File

In your Blade file where you want to use CKEditor, you can include a textarea element and initialize CKEditor using JavaScript and jQuery.

For example, let's say you have a create post form. Open your Blade file (e.g., create.blade.php) and add the following code:

@extends('layouts.app')

@section('content')
    <h1>Create Post</h1>

    <form action="{{ route('posts.store') }}" method="POST">
        @csrf

        <div class="form-group">
            <label for="content">Content</label>
            <textarea name="content" id="content"></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Create</button>
    </form>

    <script>
        $(document).ready(function() {
            ClassicEditor
                .create(document.querySelector('#content'))
                .catch(error => {
                    console.error(error);
                });
        });
    </script>
@endsection

In this example, we include the CKEditor script from the CDN. We then use jQuery's $(document).ready() function to ensure that the DOM is ready before initializing CKEditor on the #content textarea.

Step 3: Test CKEditor

Start your Laravel development server:

php artisan serve

Now, you can visit the create post page in your browser and see the CKEditor instance in action.

That's it! You have successfully integrated CKEditor into your Laravel 10 project using jQuery.