富文本编辑器的使用

1:导包 

yarn add @vueup/vue-quill--save 用于提供基本的富文本

yarn add quill-image-extend-module    用于提供图片上传

2:引入

import { QuillEditor, Quill } from '@vueup/vue-quill' 引入模板

import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'

Quill.register('modules/ImageExtend', ImageExtend) 引入图片上传

import { QuillEditor } from '@vueup/vue-quill'

import '@vueup/vue-quill/dist/vue-quill.snow.css';

import '@vueup/vue-quill/dist/vue-quill.bubble.css'; 引入样式 建议全局引入

3:调用

<QuillEditor 
    ref="quillRef" 
    style="height: 256px;" 
    v-model:content="ruleForm.introduce" 
    contentType="html"
    :options="editorOption" 
/>

4: 数据

Quill.register('modules/ImageExtend', ImageExtend)

const quillRef = ref(null)

const ruleForm = ref({
  id: '',
  coverImage: '',
  name: '',
  description: '',
  introduce: '',
  teacherId: '',
  createTime: '',
  updateTime: ''
})

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  ['blockquote', 'code-block'], // 引用
  [{ 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'] // 链接、图片、视频
  // ['link', 'image', 'video'] // 链接、图片、视频
]

const editorOption = {
  theme: 'snow',
  placeholder: '请输入课程介绍',
  modules: {
    ImageExtend: {
      name: 'file', // 参数名
      action: 'http://localhost:8888/file', // 服务器地址，如果为空则采用base64插入图片
      // headers: (xhr) => {
      //   // 设置请求头参数（选填）
      //   xhr.setRequestHeader('', '')
      // },
      response: (res) => {
        console.log('上传图片回调：', res)
        return res.data.data.path
      },
      size: 2, // 图片不能超过2M
      sizeError: () => {
        ElMessage.error('粘贴图片大小不能超过2M!')
      }
    },
    toolbar: {
      container: toolbarOptions,
      handlers: {
        image: function (value) {
          QuillWatch.emit(this.quill.id)
        }
      }
    }
  }
}