This answer for CKEDITOR USERS

Level 88

I don't think you can. CKEditor is Javascript that changes the DOM automatically. Livewire is rendered on the server and is updated by ajax calls, which are rendered on the server.

Livewire renders the initial component output with the page (like a Blade include), this way it's SEO friendly.
When an interaction occurs, Livewire makes an AJAX request to the server with the updated data.
The server re-renders the component and responds with the new HTML.
Livewire then intelligently mutates DOM according to the things that changed.

According to this, it's not possible as far as I know. You can try to ask Caleb on Twitter if the knows how to do this ;)

2 likes

kurucu

Level 8

Just spent an evening getting this working! My code (using Alpine and Livewire together) is as follows:

                <div
                    class="form-textarea w-full"
                    x-data
                    x-init="
                        BalloonEditor.create($refs.myIdentifierHere)
                        .then( function(editor){
                            editor.model.document.on('change:data', () => {
                               $dispatch('input', editor.getData())
                            })
                        })
                        .catch( error => {
                            console.error( error );
                        } );
                    "
                    wire:ignore
                    wire:key="myIdentifierHere"
                    x-ref="myIdentifierHere"
                    wire:model.debounce.9999999ms="content"
                >{!! $content !!}</div>

What it does is as follows (largely following Livewire docs):

x-data initialises an Alpine component for the scope of the div.
x-init runs the code specified, basically gets BalloonEditor (choose the CKEditor of your preference) to init the div as a CKEditor. It takes $refs.myIdentifierHere as a magic argument - Alpine puts the correct javascript in for you.
myIdentifierHere is simply a cross-reference to x-ref="myIdentifierHere" below.
wire:ignore tells Livewire not to do the Dom diffing for this div (or its children)
wire:key makes it easier for Livewire to track the div... I'm not sure why it's needed yet, but it's buggy without. It's usually used for loops etc.
wire:model.debounce.99999ms is a hack too - the lazy modifier doesn't submit properly on every instance, so this is a workaround to using lazy. Otherwise it works the same way (near enough).

10 likes

mohansharma

Level 4

@kurucu Seems good. I will surely give it a try. Thanks

1 like

stephenjude

Level 1

@kurucu this was really helpful. I used wire:model.debounce.2000ms="content" and it works fine. Thanks for sharing :)

1 like

awizemann

Level 1

Even though this is an old post, here is an update that might be worthwhile. First off, the code is slick and works like a charm. Thank you @kurucu, great work. If your struggling to have the editor clear when you are loading another element or have multiple elements, just change the wire:key="myIdentifierHere" to an incrementing value (mike the ID from your model).

2 likes

georgiarnaudov

Level 6

Here's how I managed to deal with this situation.

Livewire view

<div class="form-textarea w-full" x-data="editorApp()" x-init="init($dispatch)" wire:ignore wire:key="ckEditor" x-ref="ckEditor" wire:model.debounce.9999999ms="content">{!! $content !!}</div>

Javascript

<script>
    /**
     * An alpinejs app that handles CKEditor's lifecycle
     */
    function editorApp() {
        return {
            /**
             * The function creates the editor and returns its instance
             * @param $dispatch Alpine's magic property
             */
            create: async function($dispatch) {
                // Create the editor with the x-ref
                const editor = await ClassicEditor.create(this.$refs.ckEditor);
                // Handle data updates
                editor.model.document.on('change:data', function() {
                    $dispatch('input', editor.getData())
                });
                // return the editor
                return editor;
            },
            /**
             * Initilizes the editor and creates a listener to recreate it after a rerender
             * @param $dispatch Alpine's magic property
             */
            init: async function($dispatch) {
                // Get an editor instance
                const editor = await this.create($dispatch);
                // Set the initial data
                editor.setData('{!! $content !!}')
                // Pass Alpine context to Livewire's
                const $this = this;
                // On reinit, destroy the old instance and create a new one
                Livewire.on('reinit', async function(e) {
                    editor.destroy();
                    await $this.create($dispatch);
                });
            }
        }
    }
</script>

Livewire component

public function submit()
    {
        // Process form data, save to the database, etc.
      
		// Emit the reinit event after you've done processing the form
        $this->emit('reinit');
    }

Hope it helps someone. :)

3 likes

NoTimeForCaution

Level 24

Very nice! Thank you.

Works well, but the editor is not cleared following form submission.

Should the following clear the input contents:

editor.destroy()

Thanks again!

Neeraj1005

Level 9

@mohansharma @bobbybouwmann THis is how I did managed the CKEditor on my app

This answer for CKEDITOR USERS

textarea 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');
            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>

7 likes

sevenTopo

Level 1

@neeraj1005 Im using ckeditor 5 , and i followed what you did in your example , but i have a problem when i try to set the value of model message .

error message :

ckeditorerror.js:64 Uncaught TypeError: Cannot read property '$wire' of undefined

lyndon

Level 2

Genius!

Adgower

Level 14

I had similar issue using:

editor.setData('@this.content');

so I rendered the content inside the textarea on page load:

<textarea>{!! $content !!}</textarea>

1 like

dskanth

Level 1

Thanks @neeraj1005 , this worked for me !!! I am using Medium Editor (https://github.com/yabwe/medium-editor), and I followed your similar approach.

function saveTextArea() { var text_content = document.getElementsByClassName("editable")[0].innerHTML; @this.set('myModelField', text_content); }

binggle