uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题

1.在项目中安装Quill

npm i quill@1.3.7

2.需要显示富文本的页面完整代码

<template><view><div ref="quillEditor" style="height: 65vh"></div></view>
</template>	 
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'const quillEditor = ref(null)
let quill: any = null
const toolbarOptions = ref([[{ header: [1, 2, 3, 4, 5, 6, false] }],['bold', 'italic', 'underline'], // toggled buttons['image'],[{ align: [] }]
])onMounted(() => {getQuill()
})
// 初始化编辑器
const getQuill = () => {quill = new Quill(quillEditor.value, {theme: 'snow',modules: {toolbar: toolbarOptions.value}})// 监听工具栏的图片按钮点击事件quill.getModule('toolbar').addHandler('image', handleImageUpload)
}
// 图片上传const uploadImage = async (filePath: string): Promise<string> => {try {const [uploadResult] = await uni.uploadFile({url: 'xxxxxxxxxxx', // 替换为实际的上传接口地址filePath,name: 'file',formData: {},})const response = JSON.parse(uploadResult.data)if (response.code === 200) {return response.data.url // 假设返回的数据中包含图片的完整 URL} else {throw new Error(response.message || '图片上传失败')}} catch (error) {console.error('上传图片出错:', error)throw error}}// 替换 Quill 默认的图片处理逻辑
const handleImageUpload = () => {uni.chooseImage({count: 1,sizeType: ['original', 'compressed'], // 原图或压缩图sourceType: ['album', 'camera'], // 相册或相机success: async (res) => {const filePath = res.tempFilePaths[0]try {const data: any = await uploadImage(filePath)const range = quill.getSelection()if (range) {quill.insertEmbed(range.index, 'image', data.absolute_path)}} catch (error) {uni.showToast({title: '图片上传失败',icon: 'none'})}},fail: (err) => {console.error('选择图片失败:', err)}})
}// 获取编辑器内容
const getContent = () => {if (quill) {const content = quill.root.innerHTMLform.answer_detail = contentconsole.log(content) // 这里可以获取到Quill编辑器的HTML内容}
}
</script>