351 lines
7.7 KiB
Markdown
351 lines
7.7 KiB
Markdown
# 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/) |