CK-Editor Integration with Livewire

Tailwind CSS New Livewire

Demo

CK-Editor Integration Example

Livewire message property :

This is a pro component. Get Livewiredemos pro access to view / download the component code.

Component Class


<?php

namespace App\Http\Livewire;

use Livewire\Component;

class CkeditorIntegrationComponent extends Component
{
    public $message;

    public function render()
    {
        return view('livewire.ckeditor-integration-component');
    }
}

Component View File


<div class="py-5">
    <div class="container">
        <div class="row justify-content-center mb-4">
            <div class="col-12 col-md-10 col-lg-8 text-center">
                <!-- Heading -->
                <h2 class="fw-bold blue-heading">
                    CK-Editor Integration Example
                </h2>
            </div>
        </div> <!-- / .row -->
    </div>

    <div wire:ignore>
        <textarea wire:model="message" class="min-h-fit h-48 " name="message" id="message"></textarea>
    </div>
</div>

@push('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#message'))
            .then(editor => {
                editor.model.document.on('change:data', () => {
                    @this.set('message', editor.getData());
                })
            })
            .catch(error => {
                console.error(error);
            });
    </script>
@push

Usage


    @livewire('pro.ckeditor-integration-component')