How to use v-model in quill editor

user_16007420 0
Viewed 2806

I use Vue 3

I used this before. It worked just fine.

<textarea v-model="description" required></textarea>

But I changed it to this

<QuillEditor
v-model="description" required
/>

In QuillEditor, many factors such as placeholder worked well, but only v-model didn't work.

Is this simply a dependency issue? If not, how should I change it?

I downloaded it from https://vueup.github.io/vue-quill/guide/installation.html#cdn

If this is a simple dependency problem, is there a solution? If not, could you recommend another vue3 compatible editor? (Images may be attached)

vuejs3 vue.js
4 Answers
user_42857850

just sharing my finding as below:

because of quill-editor component default content Type is "delta", but if you want to assign value ( string type ), then you need to change the content type from delta to text or html

by API props "content" or "v-model:content" set the string value on quill-editor component

  1. set the contentType props to "text" or "html" on component
  2. use the :content or :v-model:content" to pass the string value to quill-editor component

referral link: https://vueup.github.io/vue-quill/api/

user_133289460

here's how you should fix it :

<quill-editor v-model:content="modelname" contentType="html" />
user_56613190

You can use this editor. I am using this editor and it's work's.

Visit - https://www.npmjs.com/package/vue3-editor

Instruction -

  1. npm i vue3-editor (install it)
  2. import { VueEditor } from "vue3-editor"; (use on specific component)
  3. components: {VueEditor}, (use in component)
  4. (use this in form)

thank you!!

user_126132420
Related