I wanna use quill rich editor and other fields on my form. But cant get access to quill innerHTML from JS function. I am using Laravel with Alpinejs and my code is

<form x-data="contactForm()" @submit.prevent="submit">
    <div >
        <div  wire:ignore>
            <div
                x-data
                x-ref="quillEditor"
                x-init="
                    quill = new Quill($refs.quillEditor, {
                        theme: 'snow',
                        modules: {toolbar: '#toolbar'}
                    });

                    quill.on('text-change', function () {
                        $dispatch('input', quill.root.innerHTML);
                    });"
                    
                    wire:model.debounce.2000ms="description"
                    
                    style="height: 300px;"
                >{{ old('description', $services_users->description) }}
            </div>
        </div>
    </div>
    <div >
        <input name="message" x-model="data.title">
    </div>
    <div >
        <button type="submit" x-text="buttonText" :disabled="loading"></button>
    </div>
</form>
<script> 
function contactForm() {
    return {
        data: {
            title: "",
            myQuill: quill.root.innerHTML,
        },
        buttonText: "Save",
        loading: false,
        submit() {
            this.buttonText = "Saving...";
            this.loading = true;
                fetch('myurl.endpoint', {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                  },
                  body: JSON.stringify(this.data),
                }).then(() => {
                    alert("Form submitted");
                }).catch(() => {
                    alert("Something went wrong");
                }).finally(() => {
                    this.data.title = ""
                    this.buttonText = "Save";
                    this.loading = false;
                });
            },
        };
    }
</scirpt>

Now i have an error Can't find variable: quill how can i get all fields from form and send to backend event if quill is not a form field?

CodePudding user response：

It doesn't work because you're calling the variable "quill" in the parent and you're declaring it in the child. To fix it declare the x-init directive in the form.

listening to the "text-change" event is not necessary. A good option is to add the content of the container before submitting the form.

see : https://alpinejs.dev/directives/data#scope

 <form x-data="contactForm()" x-init="
                    quill = new Quill($refs.quillEditor, {
                        theme: 'snow'
                    });

                    quill.on('text-change', function () {
                        $dispatch('input', quill.root.innerHTML);
                    });" @submit.prevent="submit">
    <div >
        <div  wire:ignore>
            <div
               x-ref="quillEditor"
                
                    wire:model.debounce.2000ms="description"
                    
                    style="height: 300px;"
                >{{ old('description', $services_users->description) }}
            </div>
        </div>
    </div>
    <div >
        <input name="message" x-model="data.title">
    </div>
    
    <div >
        <button type="submit" x-text="buttonText" :disabled="loading"></button>
    </div>
</form>
<script> 
function contactForm() {
    return {
      
        quill:null,
        
        data: {
            title: "",
       //   myQuill: function(){ return this.quill.root.innerHTML}
        },
        buttonText: "Save",
        loading: false,
        submit() {
            this.buttonText = "Saving...";
           
           //add content quill here
           this.data.myQuill = this.quill.root.innerHTML;
           
         
            this.loading = true;
                fetch('myurl.endpoint', {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                  },
                  body: JSON.stringify(this.data),
                }).then(() => {
                    alert("Form submitted");
                }).catch(() => {
                    alert("Something went wrong");
                }).finally(() => {
                    this.data.title = ""
                    this.buttonText = "Save";
                    this.loading = false;
                });
            },
        };
    }
</script>

CodePudding user response：

Ok this is what i did

<form x-data="contactForm()" x-init="initQuill()" x-on:submit="submit()" method="POST" action="target.url">
    <div x-ref="editor"></div>
    <input x-ref="editorValue" type="hidden" name="hidden_input">
    <button>Save</button>
</form>
<script>
function contactForm(){
    return {
        initQuill(){
            new Quill(this.$refs. editor, {theme: 'snow'});
        },
        submit(){
            console.log(this.$refs. editor.__quill.root.innerHTML);
            this.$refs.editorValue.value = this.$refs.editor.__quill.root.innerHTML;
        }
    }
}
</script>

Now is ok and works with basic. You can extend function with new features etc. Thx for help guys.