vue3+element plus quill富文本编辑器 粘贴图片、上传图片转为腾讯云Oss【已解决】

---

vue3使用quilleditor 踩坑避雷

前言

最近搞毕设时遇到一个问题，quill富文本编辑器粘贴图片、上传图片要转为在线的，但是quill富文本编辑器默认图片为base64，而我想传到腾讯云服务器上去，就有了今天这篇文章

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、上效果

不管粘贴图片还是上传图片都可以转换

二、使用步骤

1.api配置

代码如下（示例）：自己写上传接口，后端我用的腾讯云的Oss

// 上传图片到服务器
export const uploadFile = (formdata) => {
    return request.post('/upload', formdata)
}

2.主代码

代码如下（示例）：

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { reactive, onMounted, ref, toRaw, watch } from 'vue'
import { uploadFile } from "@/api/update.js";   //自己写上传接口

const props = defineProps(['value'])
const emit = defineEmits(['updateValue'])
const content = ref('')
const myQuillEditor = ref()
// 通过watch监听回显，这边使用v-model:content 不能正常回显
//   watch(() => props.value, (val) => {
//     toRaw(myQuillEditor.value).setHTML(val)
//   }, { deep: true })
const fileBtn = ref()
const data = reactive({
  content: '',
  editorOption: {
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'font': [] }],
        [{ 'align': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'header': 1 }, { 'header': 2 }],
        ['image'],
        [{ 'direction': 'rtl' }],
        [{ 'color': [] }, { 'background': [] }]
      ]
    },
    placeholder: '请输入内容...'
  }
})
const imgHandler = (state) => {
  if (state) {
    fileBtn.value.click()
  }
}
// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
const setValue = () => {
  const text = toRaw(myQuillEditor.value).getHTML()
  emit('updateValue', text)
}

// 上传图片
const uploadImg = (files) => {
  const formdata = new FormData()
  formdata.append('file', files[0])
  const upload = async () => {
    await uploadFile(formdata).then(res => {//自己写上传接口
      //   console.log(res)
      if (res.data) {
        const quill = toRaw(myQuillEditor.value).getQuill()
        const length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
      }
    });
  }
  upload()
}


const handleUpload = (e) => {
  const files = Array.prototype.slice.call(e.target.files)
  // console.log(files, "files")
  if (!files) {
    return
  }
  uploadImg(files)
}
// 初始化编辑器
onMounted(() => {
  const quill = toRaw(myQuillEditor.value).getQuill()
  if (myQuillEditor.value) {
    quill.getModule('toolbar').addHandler('image', imgHandler)
  }
  window.addEventListener('paste', e => {
    // console.log(e.clipboardData)
    if (e.clipboardData && e.clipboardData.files && e.clipboardData.files.length) {
      e.preventDefault(); // 阻止默认行为即不让剪贴板内容在div中显示出来
      // 获取图片内容
      const files = e.clipboardData.files;
      uploadImg(files)
    } else {
      console.log("粘贴内容不是图片");
    }
  })
  toRaw(myQuillEditor.value).setHTML(props.value)

})
</script>
<template>
  <!-- 富文本编辑器可以上传图片与粘贴图片并自动上传到服务器转换为在线地址 -->
  <div>
    <!-- 此处注意写法v-model:content -->
    <QuillEditor ref="myQuillEditor" theme="snow" v-model:content="content" :options="data.editorOption"
      contentType="html" @update:content="setValue()" />
    <!-- 使用自定义图片上传 -->
    <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
  </div>
</template>
  

<style scoped lang="scss">
// 调整样式
:deep(.ql-editor) {
  min-height: 180px;
}

:deep(.ql-formats) {
  height: 21px;
  line-height: 21px;
}
</style>
  

3.使用组件

代码如下（示例）：

<template>
  <div class="page">
	<Editor :value="emailForm.msg" @updateValue="getMsg" />
  </div>
</template>

<script setup>
import Editor from '@/components/Editor/index.vue'

const emailForm = reactive({
  test_msg: ''
})
const getMsg = (val) => {
  emailForm.msg = val
}
</script>

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，富文本踩坑解决，本文引用参考以下作者文章

参考引用

quill富文本编辑器处理复制图像的解决方法
https://blog.csdn.net/jansonKOU/article/details/134050651
vue3使用quill富文本编辑器，保姆级教程，富文本踩坑解决
https://blog.csdn.net/moanuan/article/details/128240291?spm=1001.2014.3001.5506