Vue 富文本编辑器插件 vue-quill-editor 坑！

Vue3 + vue-quill-editor
安装步骤：
vue3 安装vue-quill-editor

npm install @vueup/vue-quill

vue2 安装vue-quill-editor

npm install vue-quill-editor

npm安装完成之后，则是main.js引用，全局的挂载它

// 导入vue富文本编辑器
import { createApp } from 'vue';
import App from './App.vue';
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'

const app = createApp(App);
app.component('QuillEditor', QuillEditor)
app.mount("#app");

在组件中使用vue-quill-editor

<template>
<div>
  <input v-model="title" class="title" type="text">
  <input @click="saveDraft" class="saveDraft" type="button" value="保存草稿"/>
  <input class="saveDiary" type="button" value="发布日记"/>
  <quill-editor :disabled="true" theme="snow"
                id="quillEditor"
                content-type="html" :content="desc"
                style="height: 600px;"/>
</div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "diary",
  data() {
    return {
      desc: "",
      title: "【无标题】",
    }
  },
  methods:{
    saveDraft(){
      console.log(document.getElementById("quillEditor"))
    }
  }
}
</script>

<style scoped>
.saveDraft{
  height: 41px;
  margin-right: 16px;
  padding: 0 16px;
  font-size: 16px;
  color: #c7c9cb;
  border: 1px solid rgb(178, 62, 255);
  border-radius: 18px;
  white-space: nowrap;
  background: none;
}
.saveDraft:hover{
  background-color: rgba(203, 203, 203, 20%);;
}
.saveDiary{
  height: 41px;
  margin-right: 16px;
  padding: 0 16px;
  font-size: 16px;
  color: #c7c9cb;
  border: 1px solid rgb(178, 62, 255);
  border-radius: 18px;
  white-space: nowrap;
  background-color: rgb(178, 62, 255);
}
.saveDiary:hover{
  background-color: rgb(178, 62, 255, 70%);
}
.title{
  width: 20%;
  border-radius: 18px;
  padding: 8px;
  padding-right: 88px;
  font-size: 18px;
  line-height: 24px;
  background: none;
  margin: 10px;
}
/* ql开头表示富文本样式设计 */
.ql-toolbar.ql-snow {
  border: 1px solid #d1d5db;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
  background-color: rgb(178, 62, 255, 70%);
}

</style>

这里说一下，我遇到的坑，首先是v-model 在这个标签上没用，我也不知道为什么，然后就是@change事件没有被触发，这就导致我拿不到这个标签里面的数据，最后实在是用了一个没有办法的办法，使用了document.getElementById 这个方法来获取它里面的数据，里面可以完整的获取用户在中写入的样式，到时候把它用v-html标签输出一下就好了