Add CKEDITOR in Laravel-Livewire

add-ckeditor-in-laravel-livewire.md

textarea tag field

<div wire:ignore class="form-group row">
    <x-label class="col-md-3 col-form-label" for="message" :value="__('Compose message')" />
    <div class="col-md-9">
        <textarea wire:model="message" class="form-control required" name="message"
            id="message"></textarea>
        <x-error-message :value="__('message')" />
    </div>
</div>

CKEDITOR-4

<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>
<script>
    const editor = CKEDITOR.replace('message');
    
    # OR 1
    editor.on('change', function (event) {
        // console.log(event.editor.getData())
        @this.set('message', event.editor.getData());
    })
    
    # OR 2
    
     CKEDITOR.instances.message.on('change', function() {
          @this.set('message', this.getData());
      });
      
    # OR 3 now I don't want to render data in each request
     document.querySelector("#submit").addEventListener("click", () => {
        // console.log(editor.getData())
        @this.set('message', editor.getData());
    });
</script>

CKEDITOR-5

<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>

# optional if you want fire the event when submit button is clicked
<script>
 ClassicEditor
        .create(document.querySelector('#message'))
        .then(editor => {
            document.querySelector("#submit").addEventListener("click", () => {
                const textareaValue = $("#message").data("message");
                eval(textareaValue).set("message", editor.getData());
                // @this.set('message', editor.getData());
            });
        })
        .catch(error => {
            console.error(error);
        });

</script>

@salimkamboh I believe that this example is simply a WYSIWYG text area component. So the @this.set('message', editor.getData()) would work. Ensure that the wire:mode the @this.set() match. Another thing that you can do is place {!! $message !!} in the textarea tag:

<div wire:ignore class="form-group row">
    <x-label class="col-md-3 col-form-label" for="message" :value="__('Compose message')" />
    <div class="col-md-9">
        <textarea wire:model="message" class="form-control required" name="message"
            id="message">{!! $message !!}</textarea>
        <x-error-message :value="__('message')" />
    </div>
</div>

I have a Livewire form component with three WYSIWYG textareas and placed all the JS code in a single JS file rather than the blade template.

app.js or whatever

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

ClassicEditor.create(document.querySelector('#message').then( (editor) => {
            editor.model.document.on('change:data', (e) => {
                let componentId = Livewire.components.getComponentsByName('my-form')[0].id
                Livewire.find(componentId).set('message', editor.getData())
            })
        })
        .catch(error => {
            console.error(error);
        })

my-form.blade.php

<div>
    <form wire:submit.prevent="submit">
        <div wire:ignore>
            <textarea wire:model.lazy="message" class="min-h-fit h-48" name="message" id="message" wire:key="wysiwyg-message">{!! $message !!}</textarea>
        </div>
<!-- snip -->