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??