vue3中引入quill编辑器并且控制图片的大小

效果图如下

1.下载quill编辑器

yarn add @vueup/vue-quill

2.下载缩放图片的组件

yarn add quill-blot-formatter

3.引入组件

<script setup>
import { ref} from 'vue'
const form=ref({
title:'',
abstracts:'',
content:''
})
// 引入编辑器
import {QuillEditor, Quill} from '@vueup/vue-quill'
//  引入样式
import '@vueup/vue-quill/dist/vue-quill.snow.css'
// 引入缩放图片的插件
import BlotFormatter from 'quill-blot-formatter'
// 编辑器的ref实例
const myquill = ref(null)
Quill.register('modules/blotFormatter', BlotFormatter)
// 编辑器的选项配置
const quillOptions = {
  theme: 'snow', // 使用snow主题
  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', 'video'] // 添加图片和视频上传按钮,
      ],
        //自定义图片上传函数
      handlers: {
        // 点击编辑器的图片图标后触发这里的事件
        'image': function (value) {
          console.log(value, '图片')
          if (value) { // value === true
            document.querySelector('.avatar-uploader input').click()
            console.log('图片上传了')
          }
        }
      }
    },
    // 图片缩放
    blotFormatter: {
      // 可以在这里设置缩放样式
      // overlay: {
      //    style: {
      //        border: '2px solid red',
      //    }
      // },
      toolbar: {
        mainClassName: 'blot-formatter__toolbar'
      }
    }
  },
  placeholder: '请输入内容'
}
</script>

4.使用组件

// 在v-vmodel必须是这种格式：v-model:content="form.content" 且必须加上这个 contentType="html"属性，否则拿不到编辑器的值
<QuillEditor 
    ref="myquill" 
    :options="quillOptions"  
    @onPaste="handlePaste" 
    v-model:content="form.content"  
    contentType="html"
/>

5.自定义粘贴事件

onMounted(()=>{
    myquill.value.getQuill().root.addEventListener('paste', abc, false)
})
const abc=(e)=>{
  data.value = new Date().getTime()
  const clipboardData = e.clipboardData
  const types = clipboardData.types
  if (types.includes('Files')) {
    e.preventDefault();
    [].forEach.call(e.clipboardData.files, (file) => {
    // 在这里可以拿到粘贴后的图片
    })
  }
}