如何使用 Quill 文本编辑器作为 Vue.js 中的一个组件

Question

我在 vue 中将 quill 文本编辑器创建为一个组件，您可以在此处看到：

<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

即使您将问题标记为 Vue 2 问题，我猜您正在使用 Vue 3，否则，它应该工作得很好（我也试过你的代码并在 Vue 3 上修复了它）。
你实际上面对的是 breaking change issue.
当你现在想用 v-model 更新你的数据时，你需要使用 :

prop : 值 -> 模型值；
事件： 输入 -> update:modelValue；

对于 Vue 3，您的代码应该如下所示：

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

祝你项目顺利！

如何使用 Quill 文本编辑器作为 Vue.js 中的一个组件

How to use Quill text editor as a component in Vue.js

text-editor

quill

vue.js

vue-component

vuejs2