vue3中引入ueditorPlus
官方文档 下载ueditorPlus后解压 将dist或者dist-min放到静态资源文件夹下 配置相关服务及静态资源就可以加载了
<script setup lang="ts">
import { onBeforeUnmount, ref, watch, shallowRef, onMounted, defineEmits, defineProps } from 'vue'
import { formatSaveShowContent } from '@/utils/formatEditorContent'
const props: any = defineProps(['content'])
const emits = defineEmits(['editContent'])
const baseUrl = import.meta.env.VITE_APP_BASE_API
const contentRef: any = ref(formatSaveShowContent('show', props.content))
const editorInst = ref<any>(null)
const editorConfig = {
// 后端服务
serverUrl: baseUrl + 'manager/common/getUeditorConfig',
// 配置UEditorPlus的静态资源
UEDITOR_HOME_URL: '/ueditor-plus-3.7.0/dist-min/',
// 配置UEditorPlus的静态资源
UEDITOR_CORS_URL: '/ueditor-plus-3.7.0/dist-min/',
/* 上传图片配置项 */
imageActionName: 'uploadFile' /* 执行上传图片的action名称 */,
imageFieldName: 'file' /* 提交的图片表单名称 */,
imageMaxSize: 2048000 /* 上传大小限制，单位B */,
imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'] /* 上传图片格式显示 */,
imageCompressEnable: true /* 是否压缩图片,默认是true */,
imageCompressBorder: 1600 /* 图片压缩最长边限制 */,
imageInsertAlign: 'none' /* 插入的图片浮动方式 */,
imageUrlPrefix: baseUrl /* 图片访问路径前缀 */,
imagePathFormat:
baseUrl + 'manager/common/getUeditorConfig' /* 上传保存路径,可以自定义保存路径和文件名格式 */,
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
/* 涂鸦图片上传配置项 */
scrawlActionName: 'uploadscrawl' /* 执行上传涂鸦的action名称 */,
scrawlFieldName: 'file' /* 提交的图片表单名称 */,
scrawlPathFormat:
baseUrl + 'manager/common/getUeditorConfig' /* 上传保存路径,可以自定义保存路径和文件名格式 */,
scrawlMaxSize: 2048000 /* 上传大小限制，单位B */,
scrawlUrlPrefix: baseUrl /* 图片访问路径前缀 */,
scrawlInsertAlign: 'none',
/* 截图工具上传 */
snapscreenActionName: 'uploadimage' /* 执行上传截图的action名称 */,
snapscreenPathFormat:
baseUrl + 'manager/common/getUeditorConfig' /* 上传保存路径,可以自定义保存路径和文件名格式 */,
snapscreenUrlPrefix: baseUrl /* 图片访问路径前缀 */,
snapscreenInsertAlign: 'none' /* 插入的图片浮动方式 */,
/* 抓取远程图片配置 */
catcherLocalDomain: ['127.0.0.1', 'localhost', 'img.baidu.com'],
catcherActionName: 'catchimage' /* 执行抓取远程图片的action名称 */,
catcherFieldName: 'source' /* 提交的图片列表表单名称 */,
catcherPathFormat:
baseUrl + 'manager/common/getUeditorConfig' /* 上传保存路径,可以自定义保存路径和文件名格式 */,
catcherUrlPrefix: baseUrl /* 图片访问路径前缀 */,
catcherMaxSize: 2048000 /* 上传大小限制，单位B */,
catcherAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'] /* 抓取图片格式显示 */,
/* 上传视频配置 */
videoActionName: 'uploadvideo' /* 执行上传视频的action名称 */,
videoFieldName: 'file' /* 提交的视频表单名称 */,
videoPathFormat:
baseUrl + 'manager/common/getUeditorConfig' /* 上传保存路径,可以自定义保存路径和文件名格式 */,
videoUrlPrefix: baseUrl /* 视频访问路径前缀 */,
videoMaxSize: 102400000 /* 上传大小限制，单位B，默认100MB */,
videoAllowFiles: [
'.flv',
'.swf',
'.mkv',
'.avi',
'.rm',
'.rmvb',
'.mpeg',
'.mpg',
'.ogg',
'.ogv',
'.mov',
'.wmv',
'.mp4',
'.webm',
'.mp3',
'.wav',
'.mid'
] /* 上传视频格式显示 */,
/* 上传文件配置 */
fileActionName: 'uploadfile' /* controller里,执行上传视频的action名称 */,
fileFieldName: 'file' /* 提交的文件表单名称 */,
filePathFormat:
baseUrl + 'manager/common/getUeditorConfig' /* 上传保存路径,可以自定义保存路径和文件名格式 */,
fileUrlPrefix: baseUrl /* 文件访问路径前缀 */,
fileMaxSize: 51200000 /* 上传大小限制，单位B，默认50MB */,
fileAllowFiles: [
'.png',
'.jpg',
'.jpeg',
'.gif',
'.bmp',
'.flv',
'.swf',
'.mkv',
'.avi',
'.rm',
'.rmvb',
'.mpeg',
'.mpg',
'.ogg',
'.ogv',
'.mov',
'.wmv',
'.mp4',
'.webm',
'.mp3',
'.wav',
'.mid',
'.rar',
'.zip',
'.tar',
'.gz',
'.7z',
'.bz2',
'.cab',
'.iso',
'.doc',
'.docx',
'.xls',
'.xlsx',
'.ppt',
'.pptx',
'.pdf',
'.txt',
'.md',
'.xml'
] /* 上传文件格式显示 */,
/* 列出指定目录下的图片 */
imageManagerActionName: 'listimage' /* 执行图片管理的action名称 */,
imageManagerListPath: '/ueditor/jsp/upload/image/' /* 指定要列出图片的目录 */,
imageManagerListSize: 20 /* 每次列出文件数量 */,
imageManagerUrlPrefix: baseUrl /* 图片访问路径前缀 */,
imageManagerInsertAlign: 'none' /* 插入的图片浮动方式 */,
imageManagerAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'] /* 列出的文件类型 */,
/* 列出指定目录下的文件 */
fileManagerActionName: 'listfile' /* 执行文件管理的action名称 */,
fileManagerListPath: '/ueditor/jsp/upload/file/' /* 指定要列出文件的目录 */,
fileManagerUrlPrefix: baseUrl /* 文件访问路径前缀 */,
fileManagerListSize: 20 /* 每次列出文件数量 */,
fileManagerAllowFiles: [
'.png',
'.jpg',
'.jpeg',
'.gif',
'.bmp',
'.flv',
'.swf',
'.mkv',
'.avi',
'.rm',
'.rmvb',
'.mpeg',
'.mpg',
'.ogg',
'.ogv',
'.mov',
'.wmv',
'.mp4',
'.webm',
'.mp3',
'.wav',
'.mid',
'.rar',
'.zip',
'.tar',
'.gz',
'.7z',
'.bz2',
'.cab',
'.iso',
'.doc',
'.docx',
'.xls',
'.xlsx',
'.ppt',
'.pptx',
'.pdf',
'.txt',
'.md',
'.xml'
]
}
const ready = (editorInstance: any) => {
//获取编辑器实力
editorInst.value = editorInstance
}
watch(contentRef, (newVal) => {
//向父组件传递保存的内容
emits('editContent', formatSaveShowContent('save', contentRef.value))
})
</script>
<template>
<div class="content">
<vue-ueditor-wrap
v-model="contentRef"
:config="editorConfig"
:editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
@ready="ready"
/>
</div>
</template>
<style scoped lang="scss">
:deep(.edui-default .edui-editor) {
width: 100% !important;
}
// 内容高度
:deep(.edui-default .edui-editor-iframeholder) {
width: 100% !important;
// max-height:600px !important;
// overflow-y: scroll!important;
}
</style>
格式化保存回显图片路径问题
// 格式化编辑器保存展示内容
const baseUrl = import.meta.env.VITE_APP_BASE_API
export const formatSaveShowContent = (type: string, content: string) => {
if (content) {
const doc = new DOMParser().parseFromString(content, 'text/html')
const img = doc.querySelectorAll('img')
// 保存的时候格式化
img.forEach((item, i) => {
const imgSrc = item.getAttribute('src')
const saveSrcArr = imgSrc?.split(baseUrl)
if (saveSrcArr && saveSrcArr.length > 0) {
let saveSrc = saveSrcArr[saveSrcArr.length - 1]
if (saveSrc[0] == '/') {
saveSrc = saveSrc.substring(1)
}
if (type == 'save') {
item.setAttribute('src', saveSrc)
} else {
item.setAttribute('src', baseUrl + saveSrc)
}
}
})
return doc.body.innerHTML
}
return
}
