case-data-admin/UEditor配置修正说明.md

UEditor 组件配置修正说明

修正内容

1. 导入问题修正

修正前：

import { computed, onMounted, reactive, ref } from 'vue'
import userApi from "../api/user";

修正后：

import { computed, reactive } from 'vue'
// 移除了不存在的 userApi 导入
// 移除了未使用的 onMounted, ref 导入

2. 文件上传接口修正

修正前：

serverUrl: '/admin/api/admin/system/editor', // 不存在的接口

修正后：

serverUrl: '/support/file/upload', // 使用项目中已存在的文件上传接口

3. UEditor路径配置修正

修正前：

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/',

修正后：

UEDITOR_HOME_URL: '/UEditorPlus/',
UEDITOR_CORS_URL: '/UEditorPlus/',

4. 配置加载方式修正

修正前：

loadConfigFromServer: true, // 从服务器加载配置

修正后：

loadConfigFromServer: false, // 使用本地配置，避免服务器配置冲突

新增配置

文件上传配置

// 图片上传配置
imageActionName: 'uploadimage',
imageFieldName: 'file',
imageMaxSize: 2048000, // 2MB
imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
imageCompressEnable: true,
imageCompressBorder: 1600,

// 视频上传配置
videoActionName: 'uploadvideo',
videoFieldName: 'file',
videoMaxSize: 102400000, // 100MB
videoAllowFiles: ['.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mp4', '.webm'],

// 附件上传配置
fileActionName: 'uploadfile',
fileFieldName: 'file',
fileMaxSize: 51200000, // 50MB
fileAllowFiles: ['.doc', '.docx', '.pdf', '.zip', '.rar', '.txt', '.md']

错误处理配置

tipError: function(message, title) {
  console.error('UEditor Error:', message);
  // 可以在这里集成项目的消息提示组件
}

文件上传流程

UEditor组件现在使用项目中的标准文件上传接口：

1. 接口地址: /support/file/upload
2. 认证方式: Bearer Token (从localStorage获取)
3. 文件字段: file
4. 支持格式: 根据文件类型自动识别

使用说明

基本用法

<template>
  <UEditor v-model="content" :id="'my_editor'" />
</template>

<script setup>
import { ref } from 'vue';
import UEditor from '/@/components/business/ueditor.vue';

const content = ref('<p>初始内容</p>');
</script>

在文章管理中使用

<template>
  <a-form-item label="内容" name="articleContent">
    <UEditor v-model="form.articleContent" :id="'article_content'" />
  </a-form-item>
</template>

注意事项

1. 文件上传: 确保后端接口 /support/file/upload 正常工作
2. 认证: 确保用户已登录且token有效
3. 文件大小: 图片限制2MB，视频限制100MB，附件限制50MB
4. 路径配置: UEditor资源文件位于 /public/UEditorPlus/ 目录

测试建议

1. 测试基本文本编辑功能
2. 测试图片上传功能
3. 测试视频和附件上传功能
4. 检查文件上传后的显示效果
5. 验证错误处理是否正常工作

相关文件

• 组件文件: src/components/business/ueditor.vue
• 资源文件: public/UEditorPlus/
• 文件上传API: src/api/support/file-api.js
• 文章管理表单: src/views/business/case-clinical-article/case-clinical-article-form.vue