[Vuejs]-Updating existing content on more than one editor on the same page

by

0👍

The reason this is not working is because the element within the DOM does not know about, or actually get assigned, the id. To the DOM, the property this.id is nothing more than a string.

You have to assign the element holding your component an id during mounted().. Also, make sure you are importing the snow theme .css file..

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">

Code snippet is below, you can also find a CodePen mirror here:

https://codepen.io/oze4/pen/wZdjbv?editors=1010

This is what was changed:

mounted() {

    /* THIS WAS ADDED */
    this.$el.id = this.id;
    /* ^^^^^^^^^^^^^^ */

    this.$nextTick(function() {
      this.editor = new Quill("#" + this.id, {
        modules: {
          toolbar: this.quillToolbar
        },
        bounds: ".text-editor",
        theme: "snow",
        syntax: true
      });
      this.editor.root.innerHTML = this.value;
      this.editor.on("text-change", () => this.update());
    });
  },

const quillComponent = {
  template: "#quillComponent",
  props: {
    value: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: "editor"
    }
  },
  data: {
    editor: null,
    quillToolbar: [
      ["bold", "italic", "underline", "strike"],
      ["blockquote", "code-block", "link"],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ script: "sub" }, { script: "super" }],
      [{ indent: "-1" }, { indent: "+1" }],
      [{ direction: "rtl" }],
      ["image", "video"],
      [{ size: ["small", false, "large", "huge"] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [
        {color: ["red","orange","yellow","green","blue","purple","white","black"]},
        {background: ["red","orange","yellow","green","blue","purple","white","black"]}
      ],
      [{ font: [] }],
      [{ align: [] }],
      ["clean", "formula"]
    ]
  },
  mounted() {
    /* THIS WAS ADDED */
    this.$el.id = this.id;
    /* ^^^^^^^^^^^^^^ */
    this.$nextTick(function() {
      this.editor = new Quill("#" + this.id, {
        modules: {
          toolbar: this.quillToolbar
        },
        bounds: ".text-editor",
        theme: "snow",
        syntax: true
      });
      this.editor.root.innerHTML = this.value;
      this.editor.on("text-change", () => this.update());
    });
  },
  methods: {
    update() {
      let r = this.editor.getText() ? this.editor.root.innerHTML : "";
      console.log(r);
      this.$emit(
        "input",
        this.editor.getText() ? this.editor.root.innerHTML : ""
      );
    }
  }
};

new Vue({
  el: "#app",
  components: {
    quillComponent,
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">


<div id="app">
  <quill-component></quill-component>
</div>

<script type="text/x-template" id="quillComponent">
  <div></div>
</script>

Leave a comment