Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Foks's avatar
Level 15

Storage of QuillJS content

Hi! I'm currently working on adding QuillJS to a project, and I'm currently stuck with how I should store QuillJS's content for later rendering?

Any thoughts/ideas?

Thanks in advance!

0 likes
10 replies
Snapey's avatar

This is what I used on a form with an ID of news. On submit it plucks the innerhtml from the editor and copies it to a hidden input field.

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="/js/quill-blot-formatter.min.js"></script>
<!-- Initialize Quill editor -->
<script>
    Quill.register('modules/blotFormatter', QuillBlotFormatter.default);

    var toolbarOptions = [
        ['bold', 'italic', 'underline','image','link'],        // toggled buttons

        [{ 'header': 1 }, { 'header': 2 },{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] },{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

        ['clean']                                         // remove formatting button
    ];
    
    var quill = new Quill('#editor', {
        modules: {
            blotFormatter: {
                // options
            },
            toolbar: toolbarOptions
        },
        placeholder: 'Write something newsworthy',
        theme: 'snow'

    });
    var form = document.getElementById('news');
    form.onsubmit = function () {
        // Populate hidden form on submit
        var content = document.querySelector('input[name=content]');
        content.value = quill.root.innerHTML;
    }

</script>

Foks's avatar
Level 15

How did you store it in the database? Like what collumn type?

Snapey's avatar
Snapey
Best Answer
Level 122

just a text field appropriate to the size of the documents you want to store

Foks's avatar
Level 15

@snapey You don't happen to know how I can prevent the editor to disappear when I use form validation from Livewire?

Snapey's avatar

Sorry no, but it is a common issue with javascript libraries. If you rip out the editor and replace with a text area, you need to re-initialise the editor on each render. You could try wrapping the text area in a div and then putting wire:ignore on it ?

1 like
Foks's avatar
Level 15

@snapey I've used the example you gave me, but for some reason whenever I submit the form, the hidden input's value is null? Any idea on how to fix that?

Snapey's avatar

you need to check if the javascript is running and copying the value over

I would probably take a different approach doing it in Livewire

Foks's avatar
Level 15

Elarporate on the different approach?

Foks's avatar
Level 15

Found out that it was missing an input event...

element.dispatchEvent(new Event('input'));

Please or to participate in this conversation.