vue3使用quill富文本编辑器，保姆级教程，富文本踩坑解决

vue3使用quilleditor

本文是封装成组件使用

先放效果图

// 安装插件
npm install @vueup/vue-quill@alpha --save
// 局部引入
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

先封装组件，建立如下目录

全部代码如下,

  
  	
    
    
    
  




// 调整样式
:deep(.ql-editor) {
  min-height: 180px;
}
:deep(.ql-formats) {
  height: 21px;
  line-height: 21px;
}

使用

本文是第二个页面使用这个富文本编辑器有可能watch监听中找不到ref，如果不能正常使用可以稍微改装下在onMounted里赋值然后在setValue里抛出就好

  
    
    
    
  




:deep(.ql-editor) {
  min-height: 180px;
}
:deep(.ql-formats) {
  height: 21px;
  line-height: 21px;
}

保姆级教程，有问题欢迎提出