更新同一页面上多个编辑器的现有内容

Question

我通过VueJS应用程序中的自定义包装器组件使用quill。所以问题是，在打开编辑问题的模态并且它在两个不同的编辑器上得到答案时，出现错误“quill Invalid Quill container #my_id”。接着是，“nextTick中的错误：”TypeError：无法设置未定义的属性“innerHTML”

这是包装器的代码：

import Quill from 'quill'
export default {
  name: 'QuillWrapper',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: 'editor'
    }
  }, 
  data() {
    return {
        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.$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() {
      this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
    }
  }
}

Answer 1

这是不起作用的原因是因为element内的DOM不知道或实际上被分配了id。对于DOM，物业this.id只不过是一个string。

你必须在element期间分配持有你的组件的id mounted() ..此外，请确保你导入snow主题.css文件..

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

---

代码片段如下，您还可以在此处找到CodePen镜像：

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

---

这是改变了：

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>