wangeditor5 vue3 ts 图片选择器 点击上传图片从弹出model选择图片

本文详细介绍了如何在Vue3项目中集成WangEditor富文本编辑器，并实现自定义图片上传功能。

1. 环境准备：确保您的Vue项目已搭建完毕，并安装了WangEditor的Vue版本及其样式文件。

2. 组件引入：在Vue组件中引入WangEditor提供的Editor和Toolbar组件，以及您的自定义FileManagement组件。

3. 状态管理：通过Vue的响应式API（如ref）管理编辑器实例、弹窗显示状态、编辑器内容、工作模式和光标位置等关键状态。

4. 编辑器配置：自定义编辑器的默认配置，包括占位符文本和菜单配置，特别是重写图片上传菜单的行为，使其触发自定义的文件管理器弹窗。

5. 图片上传逻辑：实现FileManagement组件，用于浏览和选择图片。当用户确认选择后，通过事件传递选中的图片信息至编辑器组件，并在编辑器中插入图片。

6. 事件处理：编写逻辑处理图片插入，包括定位光标位置、构建图片HTML并插入到编辑器内容中。同时，确保在编辑器创建和销毁时执行必要的初始化和清理操作。

提示：注释由AI生成

<template>
<!-- 页面结构部分 -->
<div>
<!-- 工具栏组件，与编辑器实例关联，并配置默认设置 -->
<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<!-- 富文本编辑器组件，双向绑定内容HTML，接收编辑器配置及模式 -->
<Editor v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
<!-- 弹窗组件，用于展示文件管理器，根据dialogVisible控制显示隐藏 -->
<el-dialog v-model="dialogVisible" title="文件管理器" width="900">
<!-- 文件管理器组件，仅在dialogVisible为真时显示 -->
<FileManagement group="test" :number="20" v-if="dialogVisible" @dialog-closed="handleDialogClosed" />
</el-dialog>
</div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css" // 导入WangEditor的样式文件
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue" // 引入Vue的生命周期钩子和响应式引用
import { Editor, Toolbar } from "@wangeditor/editor-for-vue" // 导入WangEditor的Vue组件

import FileManagement from "@/components/FileManagement/index.vue" // 导入自定义的文件管理器组件

// 状态管理
const dialogVisible = ref<boolean>(false) // 控制文件管理器弹窗的显示状态
const editorRef = shallowRef<InstanceType<typeof Editor> | null>(null) // 编辑器实例引用，用于操作编辑器

const valueHtml = ref("<p>hello</p>") // 编辑器内容的初始HTML值
const mode = ref("default") // 编辑器的工作模式，默认模式
const cursorPosition = ref(null) // 存储光标位置，用于插入图片时定位

// 生命周期钩子，组件挂载后执行
onMounted(() => {
// 此处可以添加组件加载时的额外初始化逻辑
})

// 文件管理器关闭时的回调，接收选中的图片数组
const handleDialogClosed = (images: Array<any>) => {
dialogVisible.value = false // 关闭弹窗
let imgHtml = "" // 初始化图片HTML字符串
// 遍历选中的图片，构建图片HTML
for (let index = 0; index < images.length; index++) {
console.log(images[index].path_full) // 打印图片完整路径
// 添加图片HTML到字符串
imgHtml += `<p><img src='${images[index].path_full}' /></p>`
}
// 尝试定位光标并插入图片HTML
editorRef.value?.select(cursorPosition.value)
editorRef.value?.dangerouslyInsertHtml(imgHtml)
}

// 工具栏的默认配置对象
const toolbarConfig = {}

// 编辑器的默认配置，包括占位符和菜单配置
const editorConfig = {
placeholder: "请输入内容...", // 输入框提示文字
MENU_CONF: {} as any // 自定义菜单配置，此处为空对象
}
// 自定义上传图片菜单行为，调用文件管理器
editorConfig.MENU_CONF!["uploadImage"] = {
customBrowseAndUpload() {
dialogVisible.value = true // 显示文件管理器弹窗
cursorPosition.value = editorRef.value?.selection // 记录当前光标位置
}
}

// 组件销毁时清理编辑器实例，避免内存泄漏
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor) {
editor.destroy()
}
})

// 编辑器创建完成时的回调，用来保存编辑器实例引用
const handleCreated = (editor: InstanceType<typeof Editor>) => {
editorRef.value = editor
}
</script>

效果展示1

效果展示2

效果展示3