Add Quilljs for rich text input instead of simple textereas

This commit is contained in:
2024-11-19 15:16:57 +01:00
parent c6f40f2aa2
commit fc0739ab57
9 changed files with 88 additions and 27 deletions

View File

@@ -44,6 +44,16 @@
}
},
isFormValid: true,
init() {
let quill = new Quill(this.$refs.quill, { theme: 'snow' })
quill.root.innerHTML = this.fields.description
quill.on('text-change', () => {
this.fields.description = quill.root.innerHTML
})
},
validate() {
this.formValidation = Iodine.assert(this.fields, this.rules)
@@ -99,10 +109,12 @@
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
<div class="mt-1">
<textarea rows="4" name="description" id="descrpition" value="{{.ViewState.event.Description}}"
<!--<textarea rows="4" name="description" id="descrpition" value="{{.ViewState.event.Description}}"
x-model="fields.description" @blur="validateField('description')"
:class="formValidation.fields.description.valid == false ? 'border-co-red border-2' : 'border-gray-300'"
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>-->
<input type="hidden" name="description" x-model="fields.description" />
<div x-ref="quill" class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-b-2xl">></div>
</div>
</div>
@@ -252,4 +264,4 @@
</div>
</div>
{{end}}
{{end}}
{{end}}