Add Quilljs for rich text input instead of simple textereas
This commit is contained in:
@@ -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}}
|
||||
|
||||
Reference in New Issue
Block a user