# UEditor 富文本编辑器组件

## 概述

UEditor 是一个基于 `vue-ueditor-wrap` 的富文本编辑器组件，专门为文章管理、内容编辑等场景设计。该组件已经集成到文章管理系统中，支持富文本编辑、图片上传、表格插入等功能。

## 功能特性

### 🎯 核心功能
- **富文本编辑**：支持文本格式化、段落样式、列表等
- **图片管理**：支持图片上传、插入、编辑
- **表格功能**：支持表格插入、编辑、合并单元格
- **媒体支持**：支持视频、附件插入
- **代码插入**：支持代码块插入和语法高亮
- **内容导入**：支持Word、Markdown文档导入

### 🚀 增强功能
- **自动保存**：60秒自动保存，防止内容丢失
- **全屏编辑**：支持全屏模式，提升编辑体验
- **响应式设计**：自适应不同屏幕尺寸
- **右键菜单**：支持右键快捷操作
- **工具栏定制**：丰富的工具栏配置

## 快速开始

### 1. 基本用法

```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>
```

### 2. 表单集成

```vue
<template>
  <a-form :model="form" :rules="rules">
    <a-form-item label="标题" name="title">
      <a-input v-model:value="form.title" />
    </a-form-item>
    
    <a-form-item label="内容" name="content">
      <UEditor v-model="form.content" :id="'article_content'" />
    </a-form-item>
  </a-form>
</template>

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

const form = reactive({
  title: '',
  content: ''
});

const rules = {
  title: [{ required: true, message: '请输入标题' }],
  content: [{ required: true, message: '请输入内容' }]
};
</script>
```

### 3. 条件显示

```vue
<template>
  <UEditor 
    v-if="showEditor" 
    v-model="modalForm.content" 
    :id="'modal_content'" 
  />
</template>
```

## 配置说明

### 编辑器配置

```javascript
const editorConfig = {
  // 文件上传接口
  serverUrl: '/admin/api/admin/system/editor',
  
  // 请求头配置
  serverHeaders: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  },
  
  // 编辑器尺寸
  initialFrameHeight: 500,
  initialFrameWidth: '100%',
  
  // 自动保存
  enableAutoSave: true,
  autoSaveInterval: 60000,
  
  // 其他配置
  loadConfigFromServer: true,
  enableContextMenu: true,
  catchRemoteImageEnable: false
};
```

### 工具栏配置

工具栏包含以下功能组：

#### 基础编辑
- `undo` - 撤销
- `redo` - 重做
- `formatmatch` - 格式刷
- `autotypeset` - 自动排版

#### 文本格式
- `bold` - 加粗
- `italic` - 斜体
- `underline` - 下划线
- `forecolor` - 字体颜色
- `backcolor` - 背景色
- `fontfamily` - 字体
- `fontsize` - 字号

#### 段落格式
- `justifyleft` - 左对齐
- `justifycenter` - 居中对齐
- `justifyright` - 右对齐
- `justifyjustify` - 两端对齐
- `indent` - 首行缩进
- `lineheight` - 行间距

#### 插入功能
- `simpleupload` - 单图上传
- `insertimage` - 多图上传
- `insertvideo` - 视频插入
- `attachment` - 附件插入
- `inserttable` - 表格插入
- `link` - 超链接
- `insertcode` - 代码插入

#### 高级功能
- `contentimport` - 内容导入
- `template` - 模板
- `formula` - 公式
- `print` - 打印
- `preview` - 预览

## 在文章管理中的应用

### 文章编辑表单

文章管理系统中已经集成了UEditor组件，用于编辑文章内容：

```vue
<!-- 文件位置: src/views/business/case-clinical-article/case-clinical-article-form.vue -->
<a-form-item label="内容" name="articleContent" v-if="!isLinkChecked">
  <div class="editor-container">
    <div class="editor-tip">请在此处编辑文章内容，支持富文本格式、图片上传、表格等功能</div>
    <UEditor v-model="form.articleContent" :id="'article_content'" />
  </div>
</a-form-item>
```

### 表单验证

```javascript
const rules = {
  articleContent: [{ 
    required: !isLinkChecked.value, 
    message: '内容 必填',
    validator: (rule, value) => {
      if (isLinkChecked.value) {
        return Promise.resolve();
      }
      if (!value || value.trim() === '') {
        return Promise.reject('内容 必填');
      }
      return Promise.resolve();
    }
  }]
};
```

### 内容处理

```javascript
// 获取纯文本内容
if (form.articleContent) {
  form.articleContentText = form.articleContent.replace(/<[^>]*>/g, '');
}
```

## 样式定制

### 编辑器容器样式

```css
.editor-container {
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  background-color: #fafafa;
  min-height: 200px;
}

.editor-tip {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #8c8c8c;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```

### 组件样式优化

UEditor组件本身已经包含了样式优化：

```css
.uebox {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.uebox :deep(.edui-editor-toolbarbox) {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-bottom: 1px solid #e8e8e8;
}
```

## 注意事项

### 1. ID唯一性
每个UEditor实例必须有唯一的ID，避免冲突：

```vue
<UEditor :id="'editor_1'" />
<UEditor :id="'editor_2'" />
```

### 2. 数据绑定
使用v-model进行双向数据绑定：

```vue
<UEditor v-model="form.content" :id="'content_editor'" />
```

### 3. 表单验证
在表单验证规则中正确处理富文本内容：

```javascript
// 检查内容是否为空
if (!form.content || form.content.trim() === '') {
  return Promise.reject('内容不能为空');
}
```

### 4. 内容安全
提交时注意HTML内容的处理和安全过滤：

```javascript
// 简单的HTML标签移除
const plainText = htmlContent.replace(/<[^>]*>/g, '');

// 或者使用专门的HTML清理库
import DOMPurify from 'dompurify';
const cleanHtml = DOMPurify.sanitize(htmlContent);
```

### 5. 性能优化
避免在同一个页面中使用过多编辑器实例，合理控制数量。

## 测试页面

项目包含了一个测试页面用于验证UEditor组件功能：

**文件位置**: `src/views/business/ueditor-test.vue`

测试页面包含：
- 基本功能测试
- 表单集成测试
- 内容预览
- 操作按钮测试

## 文件结构

```
src/
├── components/
│   └── business/
│       └── ueditor.vue          # UEditor组件
├── views/
│   └── business/
│       └── case-clinical-article/
│           ├── case-clinical-article-form.vue    # 文章编辑表单
│           └── case-clinical-article-list.vue    # 文章列表
└── public/
    └── UEditorPlus/             # UEditor资源文件
        ├── ueditor.all.js
        ├── ueditor.config.js
        ├── ueditor.parse.js
        └── ...
```

## 依赖说明

- **vue-ueditor-wrap**: Vue3的UEditor包装器
- **UEditorPlus**: 富文本编辑器核心库
- **Ant Design Vue**: UI组件库（用于表单和样式）

## 更新日志

### v1.0.0 (当前版本)
- ✅ 基础富文本编辑功能
- ✅ 图片上传和管理
- ✅ 表格插入和编辑
- ✅ 自动保存功能
- ✅ 响应式设计
- ✅ 文章管理集成
- ✅ 样式优化

## 技术支持

如有问题，请检查：
1. 控制台错误信息
2. 网络请求状态
3. 组件导入路径
4. ID唯一性
5. 数据绑定正确性

## 相关链接

- [UEditorPlus 官方文档](https://doc.ueditorplus.com/)
- [vue-ueditor-wrap 文档](https://github.com/HaoChuan9421/vue-ueditor-wrap)
- [Ant Design Vue 文档](https://antdv.com/)