vue-quill-editor手动插入图片到指定位置

最新推荐文章于 2024-07-23 09:17:31 发布

土生土长的IU

最新推荐文章于 2024-07-23 09:17:31 发布

阅读量1.5k

点赞数 1

分类专栏： Vue 3.0 Typescrit 前端基础文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/127359428

版权

Vue 3.0 同时被 3 个专栏收录

100 篇文章 1 订阅

订阅专栏

前端基础

20 篇文章 0 订阅

订阅专栏

Typescrit

8 篇文章 0 订阅

订阅专栏

这篇博客主要介绍了在Vue3、TypeScript和Vite项目中，如何解决微前端环境下上传图片无法定位的问题。作者提供了一种自定义上传图片的方法，包括创建上传接口、获取图片地址、确定光标位置以及插入图片到编辑器中。通过quill编辑器，成功实现了图片在指定位置的插入，并调整了光标到最后。

摘要由CSDN通过智能技术生成

场景

vue3+ts+vite
只做记录使用------各位根据实际截取.

使用微前端的时候上传图片无法定位到准确的位置，所以使用自定义的方式手动插入图片

思路：
1. 自定义上传图片的接口
2. 上传成功，拿到图片地址
3. 获取选区光标位置，将图片插入其中
4. 将光标位置调整到最后

代码片段

const handleUpload = async e => {
  let quill = toRaw(quillEditor.value).getQuill()
  const files = Array.prototype.slice.call(e.target.files)
  var formData = new FormData() // new一个formData事件
  formData.append('files', files[0]) // 将file属性添加到formData里
  let res = await uploadFiles(formData)
  let length = quill.getSelection().index
  // 插入图片，res为服务器返回的图片链接地址
  quill.insertEmbed(length, 'image', res.data[0].url)
  // 调整光标到最后
  quill.setSelection(length + 1)
}