Question: Why does the editor not reset when i reset test from v-model:content="test"

[danielmoessner]

The editor doesn't change when it's v-model variable changes. Why is that?

So testReset() does nothing visual in this example.

Code:

<QuillEditor
        :id="name"
        v-model:content="test"
        :name="name"
        theme="bubble"
        toolbar="essential"
        content-type="html"
></QuillEditor>

<button @click="testReset()">reset</button>

data: {
  return {
    test: ""
  }
}

methods: {
    testReset() {
      console.log(this.test);
      this.test = "resetted";
    },
}

[dEdwardy]

try setHTML instead of setting the value of content

[luthfimasruri]

🎉 This issue has been resolved in version 1.0.0-beta.6 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[luthfimasruri]

Thanks for reporting the issue and sorry for the delayed reply. I have resolved this issue in version 1.0.0-beta.6

[danielmoessner]

Thanks for the fix, I really appreciate it. I'm just wondering, the cursor seems to reset to position 1 whenever I type something while v-model:content is set. Do you know anything about that?

[dEdwardy]

Before assigning a value to quill editor content, set the focus not to be allowed. Reopen enable after assignment

  editor.value.getQuill().enable(false)
    editor.value.setHTML(res.content)
    nextTick(() => {
      editor.value.getQuill().enable(true)
    })

[luthfimasruri]

Fixed it (revert to the previews code), but when you reset the v-model:content value, it won't update the editor, use setHTML(), setText() or setContents() methods instead if you want to reset the content.

[luthfimasruri]

The snippets:

<template>
  <QuillEditor 
    ref="myEditor" 
    v-model:content="myContent" 
    content-type="html"
  />
  <button @click="resetContent">Reset</button>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
export default {
  components: {
    QuillEditor,
  },
  data() {
    return {
      myContent: 'test'
    }
  },
  methods: {
    resetContent() {
      this.$refs.myEditor.setHTML('')
    }
  }
};
</script>

[danielmoessner]

Thanks for your quick answers. Somehow I'm not able to accomplish what I want to do.

Let me tell you what I'm playing around with:

• I've got a dynamic form generator
• This form generator has dynamic inputs
• One of those inputs is the quill editor
• This needs to happen: When the form gets new values (page reload / store change) the form inputs must update with the new values
• This also needs to happen: When the text in the input changes it should propagate these changes back to the dynamic form so it can submit all data correctly

The problem:

• Whenever I use setHTML the cursor resets, v-model:content worked on beta6 but still resetted the cursor
• value.getQuill().enable(true / false) removes me out of the text box so I have to click back into it

Here's my code at the current state:

<template>
    <QuillEditor
        :id="name"
        ref="editor"
        content=""
        :name="name"
        theme="bubble"
        toolbar="essential"
        content-type="html"
        @textChange="emitTinymce"
        @blur="editorFocus = false"
        @focus="editorFocus = true"
      />
</template>

<script>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.bubble.css";

export default {
  components: {
    QuillEditor,
  },
  props: {
    modelValue: {
      type: [String, Boolean, Number],
      default: "",
    },
  },
  emits: ["update:modelValue"],
  data() {
    return {
      content: null,
      editorFocus: false,
    };
  },
  computed: {
    useTinymce() {
      return this.type === "tinymce";
    },
  },
  watch: {
    modelValue(newValue) {
      if (this.useTinymce) {
        this.$refs.editor.setHTML(newValue);
      }
    },
  },
  methods: {
    emitTinymce() {
      this.$emit("update:modelValue", this.$refs.editor.getHTML());
    },
  },
};
</script>

I've removed the other inputs, selects and so on.

[danielmoessner]

v-model:content would be perfect if the cursor stayed were it was. However, I don't know how hard that is to implement. I'm happy to help.

[marzz17]

how can I use setHtml in the latest beta release??

[ttntm]

I encountered a similar issue yesterday. Needed to update the displayed editor content after fetching new data.

Didn't get it to work until I put the editor right into the component fetching the data (so there's no events in between), attached v-model:content to the correct key in my editable object (created by reactive()) and used setHTML() once (= 1 time) after the updated data came in.

No cursor issues that way; I also encountered them when working with the editor in its own compenent, using props/emit() to communicate with the parent.

PS: setHTML() needs a ref() when using Composition API, just in case that's what you were asking @marzz17. So, if you do this

const editor = ref()
...
<QuillEditor ref="editor" ... />

then you can use editor.value.setHTML(yourHTML) anywhere in your setup() or <script setup>.

[ghost]

Adding an issue that I had today, just in case it helps anyone. I couldn't get v-model:content to work. The name of the variable that I was using was "content", so the code was

v-model:content="content"

Tried everything I could think of and just couldn't get it working, then I changed the variable name to anything other than "content" and it worked, like this

v-model:content="quillContent"

[loading99]

I encountered a similar issue yesterday. Needed to update the displayed editor content after fetching new data.

Didn't get it to work until I put the editor right into the component fetching the data (so there's no events in between), attached v-model:content to the correct key in my editable object (created by reactive()) and used setHTML() once (= 1 time) after the updated data came in.

No cursor issues that way; I also encountered them when working with the editor in its own compenent, using props/emit() to communicate with the parent.

PS: setHTML() needs a ref() when using Composition API, just in case that's what you were asking @marzz17. So, if you do this

const editor = ref()
...
<QuillEditor ref="editor" ... />

then you can use editor.value.setHTML(yourHTML) anywhere in your setup() or <script setup>.

Great Help, I just spent much time on this. It seems the content is not rendered.

[nerocil]

@vueup/vue-quill version [e.g. 1.0.0-beta.7]

const editor = ref()
...
<QuillEditor ref="editor" ... />
...
editor.value.setHTML(htmlContnet)

Throw error
Cannot read properties of undefined (reading 'setHTML')
how to handle this issue?

[bulich]

I encountered a similar issue yesterday. Needed to update the displayed editor content after fetching new data.

Didn't get it to work until I put the editor right into the component fetching the data (so there's no events in between), attached v-model:content to the correct key in my editable object (created by reactive()) and used setHTML() once (= 1 time) after the updated data came in.

No cursor issues that way; I also encountered them when working with the editor in its own compenent, using props/emit() to communicate with the parent.

PS: setHTML() needs a ref() when using Composition API, just in case that's what you were asking @marzz17. So, if you do this

const editor = ref()
...
<QuillEditor ref="editor" ... />

then you can use editor.value.setHTML(yourHTML) anywhere in your setup() or <script setup>.

Can you show the example please? It's still buggy for me

[ttntm]

Sure @bulich - line 104 in this component here: https://github.com/ttntm/recept0r-ts/blob/main/src/views/RecipeEditable.vue

Haven't had any issues using it this way since posting my initial comment.

[mohammedmoutawakkil]

you can uncomment the watchers from the node model and it will work for the test :

// watch(
    //   () => props.content,
    //   (newContent, oldContents) => {
    //     if (!quill || !newContent || newContent === oldContents) return
    //     setContents(newContent)
    //   }
    // )

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[luthfimasruri]

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[muhyidin3222]

i get the same case. if you close and back from another page you need to close QuillEditor component, and if you open open page form you should open QuillEditor component, give v-if condition.

below my code:

<QuillEditor
              v-if="addEditType == 'add' || formData?.feature?.length"
              contentType="html"
              v-model:content="formData.feature"
              theme="snow"
              :content="formData?.feature"
              :placeholder="
                $t('common.placeholder_default_text', [$t('product.feature')])
              "
            />

[ceciogit]

same for me... also in 1.0.0 if i update the v-model:content the quill editor still show "undefined" i need to manualy update with a watch() of the object and fire a setHTML ..

[YouSour]

I have tried with setHTML() it works, but i got problem with cursor. I try another way here what i did below

index.vue

<template>
  <CustomQuillEditor label="Content" v-model="form.enContent"/>
  <button @click="resetForm">Reset</button>
</template>

<script setup>
import { reactive } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import CustomQuillEditor from './CustomQuillEditor.vue'

const initialFormState = {
  enContent: '<br/>' // you need to initial value html element
}
const form = reactive({ ...initialFormState })

// methods
const resetForm = () => {
  Object.assign(form, initialFormState)
}
</script>

CustomQuillEditor.vue

<template>
  <div class="mb-3">
    <label :for="label" class="form-label">{{ label }}</label>
      <QuillEditor
        :content="value"
        contentType="html"
        :options="options"
        @update:content="updateContent"
      />
  </div>
</template>

<script  setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'
import { computed, ref, watch } from 'vue'

const props = defineProps({
  label: { type: String, requried: true },
  modelValue: String
})

const value = computed(() => props.modelValue)

/** 
 * Quill options
 */
const options = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
      ['blockquote', 'code-block'],
      [{ header: 1 }, { header: 2 }], // custom button values
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
      [{ direction: 'rtl' }], // text direction
      [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
      [{ font: [] }],
      [{ align: [] }],
      ['link', 'video', 'clean']
    ]
  },
  theme: 'snow'
}

const emit = defineEmits(['update:modelValue'])
const updateContent = (value) => {
  emit('update:modelValue', value)
}
</script>
<style scoped>
</style>

Noted: this snippet code will initial value form.enContent: "<p><br></p>" after reset.