如何将Quill Text Editor用作vue.js中的组件

Question

我在这里看到的是VUE中的Quill Text Editor作为组件：

<template>
  <div ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null
    };
  },
  mounted() {
    var _this = this;

    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [[{
          header: [1, 2, 3, 4, false]
        }], ['bold', 'italic', 'underline', 'link']]
      },
      //theme: 'bubble',
      theme: 'snow',
      formats: ['bold', 'underline', 'header', 'italic', 'link'],
      placeholder: "Type something in here!"
    });
    this.editor.root.innerHTML = this.value;
    this.editor.on('text-change', function () {
      return _this.update();
    });
  },

  methods: {
    update: function update() {
      this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
    }
  },
}
</script>

因此，它是基本的Quill组件，我使用Quill 1.3.7。对于文档： https://quilljs.com/

因此，在父母的组件中，我创建了V-Model，以查看以查看此组件的结果：

<text-editor
                    v-model="model"/>
                <p> <span v-html="model"></span></p>

但是不幸的是，我没有任何响应，也没有错误。您认为我做错了什么？

Answer 1

即使您将问题标记为a vue 2 问题，我猜想您正在使用 vue 3 ，因为否则，它应该可以正常工作（我也尝试了您的代码并将其修复在Vue 3）。
您实际上是在面对破坏变化问题。 >
现在要使用V模型更新数据时，需要使用：

• prop： value -＆gt; ModelValue;
• 事件：输入 - ＆gt;更新：modelValue;

您的代码应该看起来像这样！

<template>
  <div ref="editor"></div>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.snow.css";

export default {
  props: {
    modelValue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    var _this = this;

    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          [
            {
              header: [1, 2, 3, 4, false],
            },
          ],
          ["bold", "italic", "underline", "link"],
        ],
      },
      //theme: 'bubble',
      theme: "snow",
      formats: ["bold", "underline", "header", "italic", "link"],
      placeholder: "Type something in here!",
    });
    this.editor.root.innerHTML = this.modelValue;
    this.editor.on("text-change", function () {
      return _this.update();
    });
  },

  methods: {
    update: function update() {
      this.$emit(
        "update:modelValue",
        this.editor.getText() ? this.editor.root.innerHTML : ""
      );
    },
  },
};
</script>

对于VUE 3：
您的项目祝您好运，