149 lines
3.5 KiB
Markdown
149 lines
3.5 KiB
Markdown
# UEditor 组件配置修正说明
|
||
|
||
## 修正内容
|
||
|
||
### 1. 导入问题修正
|
||
|
||
**修正前：**
|
||
```javascript
|
||
import { computed, onMounted, reactive, ref } from 'vue'
|
||
import userApi from "../api/user";
|
||
```
|
||
|
||
**修正后：**
|
||
```javascript
|
||
import { computed, reactive } from 'vue'
|
||
// 移除了不存在的 userApi 导入
|
||
// 移除了未使用的 onMounted, ref 导入
|
||
```
|
||
|
||
### 2. 文件上传接口修正
|
||
|
||
**修正前：**
|
||
```javascript
|
||
serverUrl: '/admin/api/admin/system/editor', // 不存在的接口
|
||
```
|
||
|
||
**修正后：**
|
||
```javascript
|
||
serverUrl: '/support/file/upload', // 使用项目中已存在的文件上传接口
|
||
```
|
||
|
||
### 3. UEditor路径配置修正
|
||
|
||
**修正前：**
|
||
```javascript
|
||
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/',
|
||
```
|
||
|
||
**修正后：**
|
||
```javascript
|
||
UEDITOR_HOME_URL: '/UEditorPlus/',
|
||
UEDITOR_CORS_URL: '/UEditorPlus/',
|
||
```
|
||
|
||
### 4. 配置加载方式修正
|
||
|
||
**修正前：**
|
||
```javascript
|
||
loadConfigFromServer: true, // 从服务器加载配置
|
||
```
|
||
|
||
**修正后：**
|
||
```javascript
|
||
loadConfigFromServer: false, // 使用本地配置，避免服务器配置冲突
|
||
```
|
||
|
||
## 新增配置
|
||
|
||
### 文件上传配置
|
||
|
||
```javascript
|
||
// 图片上传配置
|
||
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']
|
||
```
|
||
|
||
### 错误处理配置
|
||
|
||
```javascript
|
||
tipError: function(message, title) {
|
||
console.error('UEditor Error:', message);
|
||
// 可以在这里集成项目的消息提示组件
|
||
}
|
||
```
|
||
|
||
## 文件上传流程
|
||
|
||
UEditor组件现在使用项目中的标准文件上传接口：
|
||
|
||
1. **接口地址**: `/support/file/upload`
|
||
2. **认证方式**: Bearer Token (从localStorage获取)
|
||
3. **文件字段**: `file`
|
||
4. **支持格式**: 根据文件类型自动识别
|
||
|
||
## 使用说明
|
||
|
||
### 基本用法
|
||
|
||
```vue
|
||
<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>
|
||
```
|
||
|
||
### 在文章管理中使用
|
||
|
||
```vue
|
||
<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` |