# 前言 *** 需求需要实现富文本的功能，同时富文本中还可以上传视频和图片,项目的技术框架使用的是vue3+ts,因为之前vue2的时候使用的是quill,所以这里继续使用quill的插件官网：https://vueup.github.io/vue-quill/ ### 1、安装富文本编辑器 ``` npm install @vueup/vue-quill@latest --save # OR yarn add @vueup/vue-quill@latest ``` ### 2、引入全局引入 ``` import { createApp } from 'vue' import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; const app = createApp() app.component('QuillEditor', QuillEditor) ``` 局部引入 ``` import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; ``` ### 3、在页面中的使用 ``` ``` 效果图： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5301206970e74a8490229b11076e1076~tplv-k3u1fbpfcp-watermark.image?) 这是未添加任何配置的富文本，现在根据我们实际的需求，加上一些配置（自定义字体大小，自定义字体，图片上传，视频上传等） ``` ``` 效果图 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2e63039ac624bee9e78f6e96a8c358d~tplv-k3u1fbpfcp-watermark.image?) 现在的就基本可以满足我们一些日常的需求了有一点需要强调的是，如果我们的`v-model:content`是从外面传入的话，会出现，传入的有值，但是我们的富文本并没有显示内容，这个好像是没有监听到我们传入的值，所以需要我们手动设置一下 ``` watch( () => props.modelValue, //外面传入的content (v) => { if (v !== content.value) { nextTick(() => { content.value = v === undefined ? "

" : v; toRaw(quillEditorRef.value).setHTML(content.value); }); } }, { immediate: true, deep: true } ); ``` 这样就差不多了转载需标注，谢谢 (\ _ /) ( * . *) />❤️