vue3中使用富文本实在是踩了太多坑了，大概记录一下笨方法处理，有好的方法多交流

目录

一、效果展示

二、npm

三、main.js引入

四、页面使用

五、总结问题

一、效果展示

二、npm

npm install @vueup/vue-quill@alpha --save

三、main.js引入

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
app.component('QuillEditor',QuillEditor)

四、页面使用

{{ TiLength }}/500

      const htmlValue=ref("")const TiLength =ref(0)const myQuillEditor=ref(null)const editorOption=reactive({theme: "snow", // 主题    // debug: 'info',placeholder: "请输入其他说明",modules: {toolbar: {container: [["bold", "italic", "underline", "strike"],["blockquote", "code-block"],[{ header: 1 }, { header: 2 }],[{ list: "ordered" }, { list: "bullet" }],[{ script: "sub" }, { script: "super" }],[{ indent: "-1" }, { indent: "+1" }],[{ direction: "rtl" }],[{ size: ["small", false, "large", "huge"] }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }],// [{ font: [] }],[{ align: [] }]// ["clean", "link", "image"]// ['addBtn']] // 自定义工具栏选项}}})const onEditorChange=(e)=>{// console.log(myQuillEditor.value.getText().length);// console.log(TiLength.value);TiLength.value =myQuillEditor.value.getText().length-1if(TiLength.value>500){myQuillEditor.value.setText(myQuillEditor.value.getText().slice(0,500))return}}return{htmlValue,editorOption,onEditorChange,TiLength,myQuillEditor  }

五、总结问题（简单记录一下笨方法处理的）

1、双向绑定：v-model:content(一定加content)

2、change事件：@update:content

3、填写下一个富文本上一个未清空时： myQuillEditor.value.setHTML('')强制清空一下

4、编辑进入的时候：强制设置一下内容；并且延迟设置一下字数

  nextTick(()=>{TiLength.value =myQuillEditor.value.getText().length-1 })