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);ponent('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-namesname: "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标签输出一下就好了
