case-data-admin/UEditor故障排除指南.md

# UEditor 故障排除指南

## 常见错误及解决方案

### 1. 资源加载失败错误

**错误信息：**
```
Uncaught (in promise) Error: [vue-ueditor-wrap] UEditor 资源加载失败！请检查资源是否存在，UEDITOR_HOME_URL 是否配置正确！
```

**可能原因：**
- UEditor资源文件路径不正确
- 配置文件加载失败
- 依赖文件缺失

**解决方案：**

#### 方案1：检查文件路径
确保以下文件存在于正确位置：
```
public/
└── UEditorPlus/
    ├── ueditor.config.simple.js    # 简化配置文件
    ├── ueditor.all.js              # 核心文件
    ├── ueditor.config.js           # 原始配置文件
    └── lang/
        └── zh-cn/
            └── zh-cn.js            # 中文语言包
```

#### 方案2：使用简化配置
在UEditor组件中使用简化的配置文件：

```javascript
const editorDependencies = [
    '/UEditorPlus/ueditor.config.simple.js',  // 使用简化配置
    '/UEditorPlus/ueditor.all.js'
]
```

#### 方案3：检查网络请求
在浏览器开发者工具中检查：
1. Network标签页是否有404错误
2. Console标签页是否有JavaScript错误
3. 确认UEditor资源文件能正常访问

### 2. 导入路径错误

**错误信息：**
```
Failed to resolve import "/@/utils/ueditor.vue" from "src/views/business/case-clinical-article/case-clinical-article-form.vue". Does the file exist?
```

**解决方案：**
更新所有使用UEditor的组件导入路径：

```javascript
// ❌ 错误路径
import UEditor from '/@/utils/ueditor.vue';

// ✅ 正确路径
import UEditor from '/@/components/business/ueditor.vue';
```

### 3. 配置文件问题

**问题描述：**
UEditor配置文件过于复杂或压缩，导致解析失败。

**解决方案：**
使用简化的配置文件 `ueditor.config.simple.js`，包含基本功能配置。

## 调试步骤

### 步骤1：检查控制台错误
1. 打开浏览器开发者工具
2. 查看Console标签页的错误信息
3. 查看Network标签页的资源加载状态

### 步骤2：验证文件路径
在浏览器中直接访问以下URL，确认文件存在：
- `http://localhost:8081/UEditorPlus/ueditor.config.simple.js`
- `http://localhost:8081/UEditorPlus/ueditor.all.js`

### 步骤3：检查组件配置
确认UEditor组件的配置正确：

```vue
<template>
  <div class="uebox">
    <vue-ueditor-wrap  
      v-model="content" 
      :editor-id="props.id" 
      :config="editorConfig"  
      :editorDependencies="editorDependencies"
    />
  </div>
</template>

<script setup>
import { VueUeditorWrap } from 'vue-ueditor-wrap'

const editorDependencies = [
  '/UEditorPlus/ueditor.config.simple.js',
  '/UEditorPlus/ueditor.all.js'
]

const editorConfig = reactive({
  UEDITOR_HOME_URL: '/UEditorPlus/',
  initialFrameHeight: 500,
  initialFrameWidth: '100%',
  serverUrl: '/support/file/upload',
  serverHeaders: {
    'Authorization': 'Bearer '+localStorage.getItem('token')
  }
})
</script>
```

### 步骤4：测试简单配置
使用最简单的配置测试：

```vue
<vue-ueditor-wrap 
  v-model="content" 
  :editor-id="'test'"
  :config="{
    UEDITOR_HOME_URL: '/UEditorPlus/',
    initialFrameHeight: 300
  }"
/>
```

## 常见配置问题

### 1. 路径配置
```javascript
// ❌ 错误：相对路径
UEDITOR_HOME_URL: 'UEditorPlus/'

// ✅ 正确：绝对路径
UEDITOR_HOME_URL: '/UEditorPlus/'
```

### 2. 依赖配置
```javascript
// ❌ 错误：缺少依赖
:editorDependencies="[]"

// ✅ 正确：包含必要依赖
:editorDependencies="[
  '/UEditorPlus/ueditor.config.simple.js',
  '/UEditorPlus/ueditor.all.js'
]"
```

### 3. 服务器配置
```javascript
// ❌ 错误：从服务器加载配置
loadConfigFromServer: true

// ✅ 正确：使用本地配置
loadConfigFromServer: false
```

## 测试建议

### 1. 创建测试页面
创建一个简单的测试页面来验证UEditor功能：

```vue
<template>
  <div>
    <h2>UEditor 测试</h2>
    <vue-ueditor-wrap 
      v-model="content" 
      :editor-id="'test_editor'"
      :config="simpleConfig"
    />
    <div v-html="content"></div>
  </div>
</template>
```

### 2. 逐步添加功能
从基本配置开始，逐步添加功能：
1. 基本文本编辑
2. 工具栏配置
3. 文件上传配置
4. 样式定制

### 3. 检查依赖版本
确认 `vue-ueditor-wrap` 版本兼容性：
```json
{
  "vue-ueditor-wrap": "^3.0.8"
}
```

## 联系支持

如果问题仍然存在，请提供以下信息：
1. 错误截图
2. 控制台错误信息
3. 网络请求状态
4. 项目配置文件
5. 浏览器版本信息

## 相关文件

- **UEditor组件**: `src/components/business/ueditor.vue`
- **简化配置**: `public/UEditorPlus/ueditor.config.simple.js`
- **测试页面**: `src/views/business/ueditor-simple-test.vue`
- **故障排除**: `UEditor故障排除指南.md`