当前位置:首页 > JavaScript > 正文内容

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

house7个月前 (04-28)JavaScript1813

本文详细介绍了如何在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


扫描二维码推送至手机访问。

版权声明:本文由孟小豪发布,如需转载请注明出处。

本文链接:https://xiaohao7.com/?id=6

分享给朋友:
返回列表

没有更早的文章了...

没有最新的文章了...

“wangeditor5 vue3 ts 图片选择器 点击上传图片从弹出model选择图片” 的相关文章

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。