Laravel livewire and ckeditor

user_9012861 0
Viewed 8623

I'm trying to integrate ckeditro with laravel livewire but everytime I enter content into the editor, livewire removes the editor from my textarea.

My code is as follows

<div class="form-group" wire:ignore>
    <label class="required" for="description">Page Description</label>
    <textarea class="form-control ckeditor" id="description" name="description"  cols="30" rows="10"
        wire:model="description"
    ></textarea>

</div>

The following is the javascript

$(document).ready(function () {
    CKEDITOR.instances['description'].on('change', function(e){
        @this.set('description', e.editor.getData());
    });
});

Any help would be appreciated

Thanks

Update

I am slowly getting there. The only issue I have is that when I save the form, the ckeditor is removed from the textarea.

<div class="form-group" wire:ignore>
    <label class="required" for="description">Page Description</label>
    <textarea class="form-control ckeditor" id="description" name="description"  cols="30" rows="10"
    wire:model.debounce.9999999ms="description"
    x-data
    x-init="
    CKEDITOR.instances['description'].on('change', function(e){
        $dispatch('input', e.editor.getData())
    });

    "></textarea>
</div>
laravel-livewire ckeditor
8 Answers

How I did solved CKEDITOR problem in Laravel-Livewire.

Textarea

<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');
        editor.on('change', function(event){
            console.log(event.editor.getData())
            @this.set('message', event.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>
user_84553960

Livewire has a .defer modifier that batches data updates with the next network request. More on Livewire Official Documentation

Tested on Laravel 8.4 Livewire v2.0


<form wire:submit.prevent="submit">
   <div wire:ignore>
      <textarea wire:model.defer="description" class="form-control"  id="description"  name="description">{!! $description !!}</textarea>                     
   </div>
</form

Your CK editor instance

<script>
    ClassicEditor
    .create(document.querySelector('#description'))
    .then(editor => {
        editor.model.document.on('change:data', () => {
            @this.set('description', editor.getData());
        })
    })
    .catch(error => {
        console.error(error);
    });
</script>
user_79649050

When you save the form, Livewire reloads the Livewire component. Currently, you are loading ckeditor when the doc is ready.

On your save event, emit an event like:

$this->emitUp('postAdded');

And then in your javascript, add a listener for the event like:

<script>
window.livewire.on('postAdded' => {
    CKEDITOR.instances['description'].on('change', function(e){
        @this.set('description', e.editor.getData());
    });
});
</script>

This should load ckeditor on the newly updated component code. (https://laravel-livewire.com/docs/events)

Also, I would recommend changing this:

wire:model.debounce.9999999ms="description"

to this:

wire:model.lazy="description"

as this will wait until the textarea loses focus for Livewire to update. (https://laravel-livewire.com/docs/properties#lazy-updating)

user_131235520

I had the same problem. You can re-initialize ckeditor with 'dehydrate'.

public function dehydrate() {
     $this->emit('initializeCkEditor');
}

And in the parent view you can initialize the CKEditor again

 Livewire.on('initializeCkEditor', function () {
    ClassicEditor.create(document.getElementById('idOfTextarea')).then(editor => { thisEditor = editor });
 });
user_89141290

use wire:ignore in your container. This will prevent livewire to re-rendered the component. The explanation is here, just search in the code.

https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker

<div id="where-the-livewire-id-attached">
    <div id="container-wrapper" wire:ignore>
        <textarea id="your-editor" cols="30" rows="10"></textarea>
        <div id="word-count"></div>
    </div>
</div>

user_105790460

I did this using alpinejs x-init initialize the editor wire:model binds data value from the editor wire:ignore is for letting know livewire to skip the editor from re-rendering when the state changes

<div class="row">
                        <div class="col mb-3">
                            <label for="productDescription" class="form-label">Product
                                Description</label>
                            <div wire:ignore>
                                <textarea x-data x-init="ClassicEditor
                                .create(document.querySelector('#description'), {

                                })
                                .then(editor => {
                                    editor.model.document.on('change:data', () => {
                                        @this.set('description', editor.getData());
                                    })
                                })
                                .catch(err => {
                                    console.error(err.stack);
                                });" id="description" wire:model.lazy="description" name="description" required>
                                {!! $description !!}
                            </textarea>
                            </div>
                            @error('description')
                                <span
                                    class="text-warning"><small><strong>{{ $message }}</strong></small></span>
                            @enderror
                            <div class="form-text"><small class="text-muted">Enter a detailed
                                    description of the product</small></div>
                        </div>
                    </div>
user_80991000

To make it work with ckeditor here is how we can do it

ClassicEditor
.create( document.querySelector( '#yourCkId' ) )
.then( editor => {
    console.log( editor );
    editor.model.document.on( 'change:data', () => {
        // Below @this.set breaks down my ckeditor so I am avoiding it to set ckeditor value
        // @this.set("description", editor.getData());

        //instead use this
        $('#yourTextAreaId').val(editor.getData());
    } );
} )
.catch( error => {
    console.error( error );
} );

and the HTML

<form wire:submit.prevent="store(document.querySelector('#yourTextAreaId').value)">
    <div wire:ignore>
        <div id="yourCkId">{!! $description !!}</div>
    </div>
    <textarea id="yourTextAreaId" wire:key="uniqueKey"  wire:model="description" style="display: none">
        {!! $description !!}
    </textarea>
</form>

And Your Livewire Controller

public function store($note){

    $this->note = $note;

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

<div>
<div wire:ignore>
    <textarea class="form-control" wire:model="description" x-data x-init="
        ClassicEditor
        .create( $refs.editorDescription)
        .then(function(editor){
            
            editor.model.document.on('change:data', () => {
                @this.set('description', editor.getData())
                
            })
            
        })
        .catch( error => {
            console.error( error );
        } );" x-ref="editordescription">
    </textarea>
</div>
user_150607630
Related