ollie_123's avatar

A Buggy Quill Editor - Not always saving updates...

Hi All

I've had a Quill WYIWYG editor running in my livewire app for a while but its quite buggy and inconsistent in saving the changes OR when i create a record it doesn't always see that theres text in there.

I was just wondering if anyone else had found this and if there was a solution?

here's my code for reference:-

<div class="mt-2 bg-white" wire:ignore>
    <div class="form-input-textarea"
        x-data
        name="main_description"
        x-ref="quillEditor"
        x-init="
            quill = new Quill($refs.quillEditor, {theme: 'snow'});
            quill.on('text-change', function () {
            $dispatch('input', quill.root.innerHTML);
            });
        "
        wire:model.debounce.9999ms="main_description"
    >
        {!! $main_description !!}
    </div>
</div>

Thanks in advance

0 likes
3 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

The issue could be related to the wire:model.debounce.9999ms directive. It's possible that the debounce time is too long, causing the updates to not be saved consistently. Try reducing the debounce time to a lower value, such as 500ms or 1000ms, and see if that improves the consistency of the updates.

Another potential issue could be related to the x-data directive. Make sure that the x-data value is unique for each instance of the Quill editor on the page. If multiple instances of the editor are using the same x-data value, it could cause conflicts and inconsistent behavior.

Here's an updated version of the code with a shorter debounce time and a unique x-data value:

<div class="mt-2 bg-white" wire:ignore>
    <div class="form-input-textarea"
        x-data="{quillEditor: null}"
        name="main_description"
        x-ref="quillEditor"
        x-init="
            quillEditor = new Quill($refs.quillEditor, {theme: 'snow'});
            quillEditor.on('text-change', function () {
                $dispatch('input', quillEditor.root.innerHTML);
            });
        "
        wire:model.debounce.500ms="main_description"
    >
        {!! $main_description !!}
    </div>
</div>

Please or to participate in this conversation.