gdxz/case-data-admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1111

Browse Source
This commit is contained in:
admin
2025-08-15 14:08:23 +08:00
parent 703dd48e3e
commit a67ad3a01a
3 changed files with 325 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/business/ueditor.vue
+153 -696
View File
@@ -1,71 +1,22 @@
<template>
<div class="uebox">
<div v-if="editorError" class="editor-error">
<p>编辑器加载失败: {{ editorError }}</p>
<button @click="retryLoad">重试加载</button>
</div>
<vue-ueditor-wrap
v-model="content"
:editor-id="props.id"
:config="editorConfig"
:editorDependencies="editorDependencies"
:editorDependencies="['ueditor.config.js', 'ueditor.all.js', 'lang/zh-cn/zh-cn.js']"
@ready="onEditorReady"
@error="onEditorError"
/>
</div>
</template>
</template>
<script setup>
import { VueUeditorWrap } from 'vue-ueditor-wrap'
import { computed, reactive, onMounted, ref } from 'vue'
import { useUserStore } from '/@/store/modules/system/user.js'
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const'
import { computed, onMounted, reactive, ref } from 'vue'
import { useUserStore } from '/@/store/modules/system/user.js'
// 解析后端API基地址（按环境变量/全局变量/本地存储，依次回退）
const resolveApiBase = () => {
const env = import.meta.env || {}
const candidates = [
env.VITE_APP_API_URL, // 使用正确的环境变量名
env.VITE_GLOB_API_URL,
env.VITE_API_BASE,
env.VITE_API_URL,
env.VITE_BASE_API,
// 可选的全局变量/本地存储回退
typeof window !== 'undefined' ? window.__API_BASE__ : '',
typeof localStorage !== 'undefined' ? localStorage.getItem('API_BASE_URL') : ''
].filter(Boolean)
const base = candidates.length > 0 ? candidates[0] : ''
return base ? base.replace(/\/+$/,'') : ''
}
const apiBase = resolveApiBase()
const uploadEndpoint = '/support/file/upload'
const resolvedServerUrl = `${apiBase}${uploadEndpoint}`
// 获取用户store实例
const userStore = useUserStore()
// 根据环境动态设置UEditor路径
const isProduction = computed(() => {
return apiBase.includes('dev-casedata.igandan.com') || apiBase.includes('casedata.igandan.com')
})
const ueditorBasePath = computed(() => {
if (isProduction.value) {
// 线上环境：确保包含UEditorPlus层级
return '/admin/web/UEditorPlus/'
}
// 本地环境
return '/UEditorPlus/'
})
// 调试信息
console.log('UEditor环境配置:', {
apiBase: apiBase.value,
isProduction: isProduction.value,
ueditorBasePath: ueditorBasePath.value
})
const props = defineProps({
// 内容
@@ -82,8 +33,11 @@
})
const emits = defineEmits(['update:modelValue'])
const content = computed({
// 获取userStore实例
const userStore = useUserStore()
const content = computed({
get() {
return props.modelValue || ''
},
@@ -93,86 +47,155 @@
return value
}
})
// 编辑器事件处理
const onEditorReady = (editorInstance) => {
console.log('UEditor已就绪:', editorInstance);
console.log('UEditor配置:', editorInstance.options);
console.log('UEditor serverHeaders:', editorInstance.getOpt('serverHeaders'));
console.log('UEditor serverUrl:', editorInstance.getOpt('serverUrl'));
// 确保headers被正确设置
const token = userStore.getToken;
if (token) {
editorInstance.options.serverHeaders = {
'Authorization': 'Bearer ' + token
};
console.log('手动设置UEditor headers:', editorInstance.options.serverHeaders);
}
};
// 编辑器状态
const editorError = ref('')
const editorReady = ref(false)
// UEditor依赖文件配置
const editorDependencies = computed(() => {
if (isProduction.value) {
// 线上环境：使用相对路径，让UEDITOR_HOME_URL处理基础路径
return [
'ueditor.config.js',
'ueditor.all.js',
'lang/zh-cn/zh-cn.js'
]
}
// 本地环境：使用相对路径
return [
'ueditor.config.js',
'ueditor.all.js',
'lang/zh-cn/zh-cn.js'
]
})
const onEditorError = (error) => {
console.error('UEditor错误:', error);
};
const editorConfig = reactive({
// 基础路径配置 - 必须正确设置，避免路径拼接问题
get UEDITOR_HOME_URL() {
return ueditorBasePath.value
},
get UEDITOR_CORS_URL() {
return ueditorBasePath.value
},
// 不从服务器加载配置，使用本地配置
loadConfigFromServer: false,
// 使用项目中的文件上传接口（按环境解析，直接包含folder参数）
serverUrl: `${resolvedServerUrl}?folder=${FILE_FOLDER_TYPE_ENUM.ARTICLE.value}`,
serverHeaders: computed(() => ({
'Authorization': 'Bearer ' + userStore.getToken
})),
// 编辑器基本配置
initialFrameHeight: 500,
initialFrameWidth: '100%',
autoHeightEnabled: false,
catchRemoteImageEnable: false,
// 编辑器功能配置
enableAutoSave: true,
autoSaveInterval: 60000, // 60秒自动保存
enableContextMenu: true,
// 图片上传配置 - 简化配置
imageActionName: 'uploadimage',
imageFieldName: 'file',
imageMaxSize: 2048000, // 2MB
imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
imageCompressEnable: false, // 禁用图片压缩，避免webuploader错误
imageCompressBorder: 1600,
imageInsertAlign: 'none',
imageUrlPrefix: '',
// 视频上传配置
videoActionName: 'uploadvideo',
videoFieldName: 'file',
videoMaxSize: 102400000, // 100MB
videoAllowFiles: ['.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg', '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.wav', '.mid'],
videoUrlPrefix: '',
// 附件上传配置
fileActionName: 'uploadfile',
fileFieldName: 'file',
fileMaxSize: 51200000, // 50MB
fileAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg', '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.wav', '.mid', '.rar', '.zip', '.tar', '.gz', '.7z', '.bz2', '.cab', '.iso', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.md', '.xml'],
fileUrlPrefix: '',
// 完整的工具栏配置
// 不再请求后端配置，直接使用本地配置
loadConfigFromServer: false,
UEDITOR_HOME_URL: import.meta.env.MODE=="development" ? '/UEditorPlus/' : '/admin/web/UEditorPlus/',
UEDITOR_CORS_URL: import.meta.env.MODE=="development" ? '/UEditorPlus/' : '/admin/web/UEditorPlus/',
initialFrameHeight: 400, // 高度
initialFrameWidth: '100%',
autoHeightEnabled: false,
catchRemoteImageEnable: false,
// 图片上传配置
imageActionName: "uploadimage",
imageFieldName: "file",
imageMaxSize: 8388608,
imageAllowFiles: [".jpg", ".png", ".jpeg"],
imageCompressEnable: false,
imageCompressBorder: 5000,
imageInsertAlign: "none",
imageUrlPrefix: "",
// 配置图片上传接口
serverUrl: `${import.meta.env.VITE_APP_API_URL || 'http://127.0.0.1:1024'}/support/file/upload?folder=1`,
// 配置上传请求头 - 使用getter确保每次都能获取到最新的token
get serverHeaders() {
const token = userStore.getToken;
console.log('UEditor上传请求token:', token);
return {
'Authorization': 'Bearer ' + token
};
},
// 也可以尝试直接设置headers
headers: {
'Authorization': 'Bearer ' + userStore.getToken
},
// 确保UEditor使用我们的配置
loadConfigFromServer: false,
// 配置响应处理，将后端的ResponseDTO格式转换为UEditor期望的格式
serverResponsePrepare: function(response) {
try {
// 如果响应是字符串，尝试解析为JSON
if (typeof response === 'string') {
response = JSON.parse(response);
}
// 检查是否是ResponseDTO格式
if (response && response.code === 200 && response.data) {
// 返回UEditor期望的格式，使用FileUploadVO的字段
return {
state: 'SUCCESS',
url: response.data.fileUrl,
title: response.data.fileName,
original: response.data.fileName,
type: response.data.fileType,
size: response.data.fileSize
};
} else {
// 如果响应格式不正确，返回错误
return {
state: 'ERROR',
error: response.msg || '上传失败'
};
}
} catch (e) {
console.error('处理上传响应失败:', e);
return {
state: 'ERROR',
error: '响应解析失败'
};
}
},
// 涂鸦配置
scrawlActionName: "uploadscrawl",
scrawlFieldName: "file",
scrawlMaxSize: 10485760,
scrawlUrlPrefix: "",
scrawlInsertAlign: "none",
// 截图配置 - 使用图片上传接口
snapscreenActionName: "uploadimage",
snapscreenFieldName: "file",
snapscreenUrlPrefix: "",
snapscreenInsertAlign: "none",
// 图片抓取配置
catcherActionName: "catchimage",
catcherFieldName: "source",
catcherLocalDomain: ["127.0.0.1", "localhost"],
catcherUrlPrefix: "",
catcherMaxSize: 10485760,
catcherAllowFiles: [".jpg", ".png", ".jpeg"],
// 视频上传配置
videoActionName: "uploadvideo",
videoFieldName: "file",
videoUrlPrefix: "",
videoMaxSize: 104857600,
videoAllowFiles: [".mp4"],
// 文件上传配置
fileActionName: "uploadfile",
fileFieldName: "file",
fileUrlPrefix: "",
fileMaxSize: 104857600,
fileAllowFiles: [".zip", ".pdf", ".doc"],
// 图片管理配置
imageManagerActionName: "listimage",
imageManagerListSize: 20,
imageManagerUrlPrefix: "",
imageManagerInsertAlign: "none",
imageManagerAllowFiles: [".jpg", ".png", ".jpeg"],
// 文件管理配置
fileManagerActionName: "listfile",
fileManagerUrlPrefix: "",
fileManagerListSize: 20,
fileManagerAllowFiles: [".zip", ".pdf", ".doc"],
// 公式配置
formulaConfig: {
imageUrlTemplate: "https://r.latexeasy.com/image.svg?{}"
},
toolbars:[
[
"fullscreen", // 全屏
//"fullscreen", // 全屏
"source", // 源代码
"|",
"undo", // 撤销
@@ -232,8 +255,6 @@
"insertimage", // 多图上传
"emotion", // 表情
"scrawl", // 涂鸦
"insertvideo", // 视频
"attachment", // 附件
"insertframe", // 插入Iframe
"insertcode", // 插入代码
"pagebreak", // 分页
@@ -267,500 +288,7 @@
"searchreplace", // 查询替换
"help", // 帮助
]
],
// 图片上传配置
imageConfig: {
disableUpload: false,
disableOnline: false,
selectCallback: null
},
// 视频上传配置
videoConfig: {
disableUpload: false,
selectCallback: null
},
// 附件上传配置
attachmentConfig: {
disableUpload: false,
selectCallback: null
},
// 其他配置
debug: false,
autoSaveEnable: true,
autoSaveRestore: false,
maximumWords: 10000,
maxUndoCount: 20,
minFrameHeight: 220,
autoFloatEnabled: false,
topOffset: 0,
toolbarTopOffset: 0,
// 文件处理配置 - 避免webuploader错误
enableContextMenu: true,
catchRemoteImageEnable: false,
autoHeightEnabled: false,
// 错误处理
tipError: function(message, title) {
console.error('UEditor Error:', message);
editorError.value = message;
}
})
// 编辑器就绪事件
const onEditorReady = (editorInstance) => {
console.log('UEditor已就绪:', editorInstance);
editorReady.value = true;
editorError.value = '';
// 确保编辑器可编辑
if (editorInstance && editorInstance.setEnabled) {
try {
editorInstance.setEnabled(true);
} catch (error) {
console.error('启用编辑器失败:', error);
}
}
// 设置初始内容
if (content.value) {
try {
editorInstance.setContent(content.value);
} catch (error) {
console.error('设置初始内容失败:', error);
}
}
// 监听图片上传完成事件
if (editorInstance && editorInstance.addListener) {
try {
// 监听图片上传完成
editorInstance.addListener('afterimagepaste', function(type, data) {
console.log('图片粘贴完成:', type, data);
});
editorInstance.addListener('afterimageinsert', function(type, data) {
console.log('图片插入完成:', type, data);
});
// 尝试监听上传完成事件
editorInstance.addListener('afterimageupload', function(type, data) {
console.log('图片上传完成:', type, data);
});
// 监听内容变化，检查是否有图片插入
editorInstance.addListener('contentchange', function() {
console.log('编辑器内容变化');
const content = editorInstance.getContent();
console.log('当前内容:', content);
// 检查内容中是否包含图片
if (content.includes('<img')) {
console.log('检测到图片标签');
// 检查是否有undefined的图片src，如果有则尝试修复
if (content.includes('src="undefined"')) {
console.log('检测到undefined图片src，尝试修复');
// 延迟执行，等待图片上传完成
setTimeout(() => {
// 这里可以尝试从其他地方获取正确的图片URL
console.log('尝试修复undefined图片src');
}, 2000);
}
}
});
} catch (error) {
console.error('添加事件监听器失败:', error);
}
}
// 尝试重写图片上传成功的处理
if (editorInstance && editorInstance.execCommand) {
try {
// 保存原始的execCommand方法
const originalExecCommand = editorInstance.execCommand;
// 重写execCommand方法，拦截图片插入
editorInstance.execCommand = function(command, ...args) {
console.log('执行命令:', command, args);
if (command === 'inserthtml' && args[0] && args[0].includes('<img')) {
console.log('检测到图片插入命令:', args[0]);
}
// 调用原始方法
return originalExecCommand.call(this, command, ...args);
};
console.log('已重写execCommand方法');
} catch (error) {
console.error('重写execCommand失败:', error);
}
}
}
// 编辑器错误事件
const onEditorError = (error) => {
console.error('UEditor错误:', error);
editorError.value = error.message || '编辑器加载失败';
editorReady.value = false;
}
// 重试加载
const retryLoad = () => {
editorError.value = '';
editorReady.value = false;
// 强制重新渲染组件
location.reload();
}
// 组件挂载后的处理
onMounted(() => {
// 强制设置UEditor的全局路径配置
const currentUeditorBasePath = ueditorBasePath.value
console.log('=== UEditor路径配置开始 ===')
console.log('当前环境:', isProduction.value ? '线上' : '本地')
console.log('设置UEditor全局路径:', currentUeditorBasePath)
// 在UEditor加载前设置全局配置，避免路径问题
window.UEDITOR_HOME_URL = currentUeditorBasePath;
window.UEDITOR_CORS_URL = currentUeditorBasePath;
// 设置UEditor的全局上传成功回调
window.UEDITOR_CONFIG = window.UEDITOR_CONFIG || {};
// 强制覆盖全局配置中的路径
window.UEDITOR_CONFIG.UEDITOR_HOME_URL = currentUeditorBasePath;
window.UEDITOR_CONFIG.UEDITOR_CORS_URL = currentUeditorBasePath;
// 添加路径保护，防止被覆盖
Object.defineProperty(window, 'UEDITOR_HOME_URL', {
get: () => currentUeditorBasePath,
set: (value) => {
console.warn('尝试修改UEDITOR_HOME_URL:', value, '，强制保持为:', currentUeditorBasePath)
},
configurable: false
})
Object.defineProperty(window, 'UEDITOR_CORS_URL', {
get: () => currentUeditorBasePath,
set: (value) => {
console.warn('尝试修改UEDITOR_CORS_URL:', value, '，强制保持为:', currentUeditorBasePath)
},
configurable: false
})
console.log('=== UEditor路径配置完成 ===')
// 图片上传成功后的处理 - 关键配置
window.UEDITOR_CONFIG.onImageUploadSuccess = function(result) {
console.log('=== 图片上传成功回调开始 ===');
console.log('原始返回数据:', result);
console.log('数据类型:', typeof result);
console.log('是否为字符串:', typeof result === 'string');
let parsedResult;
try {
// 如果result是字符串，尝试解析JSON
if (typeof result === 'string') {
parsedResult = JSON.parse(result);
} else {
parsedResult = result;
}
console.log('解析后的数据:', parsedResult);
} catch (e) {
console.error('JSON解析失败:', e);
parsedResult = result;
}
// 确保返回正确的数据格式
if (parsedResult && parsedResult.data && parsedResult.data.fileUrl) {
const returnData = {
url: parsedResult.data.fileUrl,
title: parsedResult.data.fileName || '图片',
alt: parsedResult.data.fileName || '图片',
state: 'SUCCESS'
};
console.log('返回给UEditor的数据:', returnData);
return returnData;
}
// 如果数据格式不对，返回错误状态
console.error('数据格式错误，无法提取fileUrl');
console.log('完整数据:', parsedResult);
return {
state: 'ERROR',
message: '上传失败：数据格式错误'
};
};
// 视频上传成功后的处理
window.UEDITOR_CONFIG.onVideoUploadSuccess = function(result) {
console.log('视频上传成功回调:', result);
if (result && result.data && result.data.fileUrl) {
return {
url: result.data.fileUrl,
title: result.data.fileName,
state: 'SUCCESS'
};
}
return {
state: 'ERROR',
message: '上传失败：数据格式错误'
};
};
// 附件上传成功后的处理
window.UEDITOR_CONFIG.onFileUploadSuccess = function(result) {
console.log('附件上传成功回调:', result);
if (result && result.data && result.data.fileUrl) {
return {
url: result.data.fileUrl,
title: result.data.fileName,
state: 'SUCCESS'
};
}
return {
state: 'ERROR',
message: '上传失败：数据格式错误'
};
};
// 检查依赖文件是否存在
editorDependencies.value.forEach(dep => {
fetch(dep)
.then(response => {
if (!response.ok) {
console.error(`依赖文件加载失败: ${dep}`);
editorError.value = `依赖文件加载失败: ${dep}`;
}
})
.catch(error => {
console.error(`依赖文件请求失败: ${dep}`, error);
editorError.value = `依赖文件请求失败: ${dep}`;
});
});
// 延迟强制刷新编辑器配置
setTimeout(() => {
console.log('=== 延迟刷新UEditor配置开始 ===')
// 检查并强制设置路径
if (window.UEDITOR_HOME_URL !== currentUeditorBasePath) {
console.warn('检测到UEDITOR_HOME_URL被修改:', window.UEDITOR_HOME_URL, '，强制恢复为:', currentUeditorBasePath)
window.UEDITOR_HOME_URL = currentUeditorBasePath
}
if (window.UEDITOR_CORS_URL !== currentUeditorBasePath) {
console.warn('检测到UEDITOR_CORS_URL被修改:', window.UEDITOR_CORS_URL, '，强制恢复为:', currentUeditorBasePath)
window.UEDITOR_CORS_URL = currentUeditorBasePath
}
if (window.UE && window.UEDITOR_CONFIG) {
// 强制覆盖配置
Object.assign(window.UEDITOR_CONFIG, editorConfig);
// 再次确保路径正确
window.UEDITOR_CONFIG.UEDITOR_HOME_URL = currentUeditorBasePath;
window.UEDITOR_CONFIG.UEDITOR_CORS_URL = currentUeditorBasePath;
console.log('=== 延迟刷新UEditor配置完成 ===')
// 确保上传成功回调被正确设置
if (window.UEDITOR_CONFIG.onImageUploadSuccess) {
console.log('UEditor图片上传成功回调已设置');
}
if (window.UEDITOR_CONFIG.onVideoUploadSuccess) {
console.log('UEditor视频上传成功回调已设置');
}
if (window.UEDITOR_CONFIG.onFileUploadSuccess) {
console.log('UEditor附件上传成功回调已设置');
}
// 尝试监听UEditor的图片上传完成事件
if (window.UE && window.UE.getEditor) {
try {
const editor = window.UE.getEditor(props.id);
if (editor && editor.addListener) {
editor.addListener('afterimagepaste', function(type, data) {
console.log('图片粘贴事件:', type, data);
});
editor.addListener('afterimageinsert', function(type, data) {
console.log('图片插入事件:', type, data);
});
editor.addListener('afterimageupload', function(type, data) {
console.log('图片上传事件:', type, data);
});
}
} catch (e) {
console.log('编辑器实例获取失败，可能还未初始化:', e);
}
}
// 尝试重写UEditor的图片上传处理逻辑
if (window.UE && window.UE.getEditor) {
try {
const editor = window.UE.getEditor(props.id);
if (editor) {
// 重写图片上传成功后的处理
const originalInsertImage = editor.insertImage;
if (originalInsertImage) {
editor.insertImage = function(url, title, alt) {
console.log('重写的insertImage被调用:', url, title, alt);
// 如果URL是undefined，尝试从其他地方获取
if (!url || url === 'undefined') {
console.error('图片URL无效:', url);
return false;
}
// 调用原始方法
return originalInsertImage.call(this, url, title, alt);
};
console.log('已重写insertImage方法');
}
}
} catch (e) {
console.log('重写insertImage失败:', e);
}
}
// 尝试拦截网络请求，在图片上传成功后强制处理
if (window.fetch) {
const originalFetch = window.fetch;
window.fetch = function(url, options) {
// 如果是图片上传请求
if (url && url.includes('/support/file/upload') && options && options.method === 'POST') {
console.log('拦截到图片上传请求:', url);
return originalFetch(url, options).then(response => {
// 克隆响应以便多次读取
const clonedResponse = response.clone();
// 读取响应内容
clonedResponse.json().then(data => {
console.log('图片上传响应:', data);
// 如果上传成功，尝试强制插入图片
if (data && data.code === 0 && data.data && data.data.fileUrl) {
console.log('图片上传成功，尝试强制插入:', data.data.fileUrl);
// 延迟执行，确保编辑器已就绪
setTimeout(() => {
if (window.UE && window.UE.getEditor) {
try {
const editor = window.UE.getEditor(props.id);
if (editor && editor.execCommand) {
const imgHtml = `<img src="${data.data.fileUrl}" title="${data.data.fileName}" alt="${data.data.fileName}" />`;
console.log('插入图片HTML:', imgHtml);
editor.execCommand('inserthtml', imgHtml);
}
} catch (e) {
console.error('强制插入图片失败:', e);
}
}
}, 1000);
}
}).catch(e => {
console.error('读取响应失败:', e);
});
return response;
});
}
// 其他请求正常处理
return originalFetch(url, options);
};
console.log('已拦截fetch请求');
}
// 拦截XMLHttpRequest，这是UEditor可能使用的另一种请求方式
if (window.XMLHttpRequest) {
const originalXHROpen = window.XMLHttpRequest.prototype.open;
const originalXHRSend = window.XMLHttpRequest.prototype.send;
window.XMLHttpRequest.prototype.open = function(method, url, ...args) {
this._ueditorUrl = url;
this._ueditorMethod = method;
return originalXHROpen.call(this, method, url, ...args);
};
window.XMLHttpRequest.prototype.send = function(data) {
const xhr = this;
const url = this._ueditorUrl;
const method = this._ueditorMethod;
// 如果是图片上传请求
if (url && url.includes('/support/file/upload') && method === 'POST') {
console.log('XMLHttpRequest拦截到图片上传请求:', url);
// 监听响应
xhr.addEventListener('load', function() {
if (xhr.status === 200) {
try {
const response = JSON.parse(xhr.responseText);
console.log('XMLHttpRequest图片上传响应:', response);
// 如果上传成功，尝试强制插入图片
if (response && response.code === 0 && response.data && response.data.fileUrl) {
console.log('XMLHttpRequest图片上传成功，尝试强制插入:', response.data.fileUrl);
// 延迟执行，确保编辑器已就绪
setTimeout(() => {
if (window.UE && window.UE.getEditor) {
try {
const editor = window.UE.getEditor(props.id);
if (editor && editor.execCommand) {
// 先删除所有undefined的图片
const currentContent = editor.getContent();
if (currentContent.includes('src="undefined"')) {
console.log('删除undefined图片');
editor.setContent(currentContent.replace(/<img[^>]*src="undefined"[^>]*>/g, ''));
}
// 插入正确的图片
const imgHtml = `<img src="${response.data.fileUrl}" title="${response.data.fileName}" alt="${response.data.fileName}" />`;
console.log('插入图片HTML:', imgHtml);
editor.execCommand('inserthtml', imgHtml);
}
} catch (e) {
console.error('XMLHttpRequest强制插入图片失败:', e);
}
}
}, 1000);
}
} catch (e) {
console.error('XMLHttpRequest响应解析失败:', e);
}
}
});
}
return originalXHRSend.call(this, data);
};
console.log('已拦截XMLHttpRequest');
}
}
}, 3000);
// 额外的图片上传处理 - 监听全局事件
window.addEventListener('message', function(event) {
if (event.data && event.data.type === 'ueditor-image-upload-success') {
console.log('收到图片上传成功消息:', event.data);
// 这里可以处理图片上传成功后的逻辑
}
});
]
})
</script>
@@ -768,76 +296,5 @@
<style scoped>
.uebox {
width: 100%;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.editor-error {
padding: 20px;
background-color: #fff2f0;
border: 1px solid #ffccc7;
border-radius: 6px;
margin-bottom: 10px;
text-align: center;
}
.editor-error button {
margin-top: 10px;
padding: 8px 16px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.editor-error button:hover {
background-color: #40a9ff;
}
/* 编辑器容器样式优化 */
.uebox :deep(.edui-editor) {
border: none !important;
width: 100% !important;
height: auto !important;
}
.uebox :deep(.edui-editor-toolbarbox) {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-bottom: 1px solid #e8e8e8;
width: 100% !important;
display: block !important;
}
.uebox :deep(.edui-editor-iframeholder) {
border: 1px solid #e8e8e8;
border-top: none;
width: 100% !important;
height: 500px !important;
}
.uebox :deep(.edui-editor-iframeholder iframe) {
width: 100% !important;
height: 100% !important;
pointer-events: auto !important;
}
.uebox :deep(.edui-editor-iframeholder .edui-body-container) {
pointer-events: auto !important;
width: 100% !important;
height: 100% !important;
}
/* 响应式设计 */
@media (max-width: 768px) {
.uebox {
margin: 0 -8px;
}
.uebox :deep(.edui-editor-toolbarbox) {
padding: 4px;
}
}
</style>
src/components/business/ueditor_副本.vue
+171
View File
@@ -0,0 +1,171 @@
<template>
<div class="uebox">
<vue-ueditor-wrap v-model="content" :editor-id="props.id" :config="editorConfig"
:editorDependencies="['ueditor.config.js', 'ueditor.all.js', 'lang/zh-cn/zh-cn.js']" />
</div>
</template>
<script setup>
import { VueUeditorWrap } from 'vue-ueditor-wrap'
import { computed, onMounted, reactive, ref } from 'vue'
import userApi from "../api/user";
const props = defineProps({
// 内容
modelValue: {
type: String,
default: ''
},
// serverUrl: {
// type: String,
// default: ''
// },
// 必须得有，如果要在一个页面内写两个或以上的组件，需要用id去区分
id: {
type: String,
default: 'common_editor'
}
})
const emits = defineEmits(['update:modelValue'])
const content = computed({
get() {
return props.modelValue || ''
},
set(value) {
emits('update:modelValue', value)
return value
}
})
// const getConfig=()=>{
// userApi.getEditorConfig({
// action:'config'
// }).then((res) => {
// let result = res.data;
// if (result.code == 200) {
// }
// })
// }
const editorConfig =reactive({
serverUrl: '/admin/api/admin/system/editor',
serverHeaders: {
'Authorization': 'Bearer '+localStorage.getItem('token')
},
loadConfigFromServer: true,
UEDITOR_HOME_URL:import.meta.env.MODE=="development"?'/static/UEditorPlus/':'/admin/web/static/UEditorPlus/',
UEDITOR_CORS_URL: import.meta.env.MODE=="development"?'/static/UEditorPlus/':'/admin/web/static/UEditorPlus/',
initialFrameHeight: 400, // 高度
initialFrameWidth: '100%',
autoHeightEnabled: false,
catchRemoteImageEnable:false,
toolbars:[
[
//"fullscreen", // 全屏
"source", // 源代码
"|",
"undo", // 撤销
"redo", // 重做
"|",
"bold", // 加粗
"italic", // 斜体
"underline", // 下划线
"fontborder", // 字符边框
"strikethrough",// 删除线
"superscript", // 上标
"subscript", // 下标
"removeformat", // 清除格式
"formatmatch", // 格式刷
"autotypeset", // 自动排版
"blockquote", // 引用
"pasteplain", // 纯文本粘贴模式
"|",
"forecolor", // 字体颜色
"backcolor", // 背景色
"insertorderedlist", // 有序列表
"insertunorderedlist", // 无序列表
"selectall", // 全选
"cleardoc", // 清空文档
"|",
"rowspacingtop",// 段前距
"rowspacingbottom", // 段后距
"lineheight", // 行间距
"|",
"customstyle", // 自定义标题
"paragraph", // 段落格式
"fontfamily", // 字体
"fontsize", // 字号
"|",
"directionalityltr", // 从左向右输入
"directionalityrtl", // 从右向左输入
"indent", // 首行缩进
"|",
"justifyleft", // 居左对齐
"justifycenter", // 居中对齐
"justifyright",
"justifyjustify", // 两端对齐
"|",
"touppercase", // 字母大写
"tolowercase", // 字母小写
"|",
"link", // 超链接
"unlink", // 取消链接
"anchor", // 锚点
"|",
"imagenone", // 图片默认
"imageleft", // 图片左浮动
"imageright", // 图片右浮动
"imagecenter", // 图片居中
"|",
"simpleupload", // 单图上传
"insertimage", // 多图上传
"emotion", // 表情
"scrawl", // 涂鸦
// "insertvideo", // 视频
// "attachment", // 附件
"insertframe", // 插入Iframe
"insertcode", // 插入代码
"pagebreak", // 分页
"template", // 模板
"background", // 背景
"formula", // 公式
"|",
"horizontal", // 分隔线
"date", // 日期
"time", // 时间
"spechars", // 特殊字符
"wordimage", // Word图片转存
"|",
"inserttable", // 插入表格
"deletetable", // 删除表格
"insertparagraphbeforetable", // 表格前插入行
"insertrow", // 前插入行
"deleterow", // 删除行
"insertcol", // 前插入列
"deletecol", // 删除列
"mergecells", // 合并多个单元格
"mergeright", // 右合并单元格
"mergedown", // 下合并单元格
"splittocells", // 完全拆分单元格
"splittorows", // 拆分成行
"splittocols", // 拆分成列
"contentimport", // 内容导入（支持Word、Markdown）
"|",
"print", // 打印
"preview", // 预览
"searchreplace", // 查询替换
"help", // 帮助
]
]
})
</script>
<style scoped>
.uebox {
width: 100%;
}
</style>
src/views/system/login3/login.vue
+1 -1
View File
@@ -13,7 +13,7 @@
<div class="box-item desc">
<div class="welcome">
<p>欢迎登录 肝胆相照临床病例库</p>
<p class="sub-welcome">「高质量代码、简洁、高效、安全」的开发平台</p>
<!-- <p class="sub-welcome">「高质量代码、简洁、高效、安全」的开发平台</p>-->
</div>
<img class="welcome-img" :src="loginGif" />
</div>