255 lines
6.2 KiB
Markdown
255 lines
6.2 KiB
Markdown
# UEditor 富文本编辑器使用示例
|
||
|
||
## 组件介绍
|
||
|
||
UEditor 是一个基于 vue-ueditor-wrap 的富文本编辑器组件，专门为文章管理、内容编辑等场景设计。
|
||
|
||
## 基本用法
|
||
|
||
### 1. 导入组件
|
||
|
||
```vue
|
||
import UEditor from '/@/components/business/ueditor.vue';
|
||
```
|
||
|
||
### 2. 在模板中使用
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<!-- 基本用法 -->
|
||
<UEditor v-model="content" :id="'editor_id'" />
|
||
|
||
<!-- 带标签的表单用法 -->
|
||
<a-form-item label="文章内容" name="articleContent">
|
||
<UEditor v-model="form.articleContent" :id="'article_content'" />
|
||
</a-form-item>
|
||
|
||
<!-- 条件显示 -->
|
||
<UEditor
|
||
v-if="showEditor"
|
||
v-model="modalForm.content"
|
||
:id="'modal_content'"
|
||
/>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
## 文章管理中的使用示例
|
||
|
||
### 文章编辑表单
|
||
|
||
```vue
|
||
<template>
|
||
<a-modal title="编辑文章" :open="visible" @cancel="onClose">
|
||
<a-form :model="form" :rules="rules">
|
||
<a-form-item label="标题" name="title">
|
||
<a-input v-model:value="form.title" placeholder="请输入文章标题" />
|
||
</a-form-item>
|
||
|
||
<a-form-item label="内容" name="content">
|
||
<div class="editor-container">
|
||
<div class="editor-tip">请在此处编辑文章内容，支持富文本格式、图片上传、表格等功能</div>
|
||
<UEditor v-model="form.content" :id="'article_content'" />
|
||
</div>
|
||
</a-form-item>
|
||
</a-form>
|
||
|
||
<template #footer>
|
||
<a-space>
|
||
<a-button @click="onClose">取消</a-button>
|
||
<a-button type="primary" @click="onSubmit">保存</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue';
|
||
import UEditor from '/@/components/business/ueditor.vue';
|
||
|
||
const visible = ref(false);
|
||
const form = reactive({
|
||
title: '',
|
||
content: ''
|
||
});
|
||
|
||
const rules = {
|
||
title: [{ required: true, message: '请输入文章标题' }],
|
||
content: [{ required: true, message: '请输入文章内容' }]
|
||
};
|
||
|
||
const onSubmit = async () => {
|
||
// 表单验证和提交逻辑
|
||
console.log('文章内容:', form.content);
|
||
};
|
||
|
||
const onClose = () => {
|
||
visible.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.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);
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 文章列表中的使用
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<a-button type="primary" @click="showAddModal">新建文章</a-button>
|
||
|
||
<a-table :columns="columns" :dataSource="articleList">
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'action'">
|
||
<a-space>
|
||
<a-button type="link" @click="showEditModal(record)">编辑</a-button>
|
||
<a-button type="link" @click="showViewModal(record)">查看</a-button>
|
||
</a-space>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
|
||
<!-- 新建/编辑模态框 -->
|
||
<article-form-modal
|
||
ref="formModalRef"
|
||
@reload="loadArticleList"
|
||
/>
|
||
|
||
<!-- 查看模态框 -->
|
||
<article-view-modal
|
||
ref="viewModalRef"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import ArticleFormModal from './components/article-form-modal.vue';
|
||
import ArticleViewModal from './components/article-view-modal.vue';
|
||
|
||
const formModalRef = ref();
|
||
const viewModalRef = ref();
|
||
const articleList = ref([]);
|
||
|
||
const showAddModal = () => {
|
||
formModalRef.value.show();
|
||
};
|
||
|
||
const showEditModal = (record) => {
|
||
formModalRef.value.show(record);
|
||
};
|
||
|
||
const showViewModal = (record) => {
|
||
viewModalRef.value.show(record);
|
||
};
|
||
|
||
const loadArticleList = () => {
|
||
// 加载文章列表
|
||
};
|
||
|
||
onMounted(() => {
|
||
loadArticleList();
|
||
});
|
||
</script>
|
||
```
|
||
|
||
## 组件特性
|
||
|
||
### 1. 自动保存
|
||
- 支持60秒自动保存
|
||
- 防止内容丢失
|
||
|
||
### 2. 丰富的工具栏
|
||
- 文本格式化（加粗、斜体、下划线等）
|
||
- 段落样式（对齐、缩进、行距等）
|
||
- 图片上传和管理
|
||
- 表格插入和编辑
|
||
- 链接和锚点
|
||
- 代码插入
|
||
- 内容导入（支持Word、Markdown）
|
||
|
||
### 3. 响应式设计
|
||
- 自适应宽度
|
||
- 可调整高度
|
||
- 支持全屏编辑
|
||
|
||
### 4. 文件上传
|
||
- 图片上传
|
||
- 附件上传
|
||
- 支持拖拽上传
|
||
|
||
## 配置说明
|
||
|
||
### 编辑器配置
|
||
|
||
```javascript
|
||
const editorConfig = {
|
||
serverUrl: '/admin/api/admin/system/editor', // 文件上传接口
|
||
initialFrameHeight: 500, // 编辑器高度
|
||
initialFrameWidth: '100%', // 编辑器宽度
|
||
enableAutoSave: true, // 启用自动保存
|
||
autoSaveInterval: 60000, // 自动保存间隔（毫秒）
|
||
enableContextMenu: true, // 启用右键菜单
|
||
catchRemoteImageEnable: false, // 是否抓取远程图片
|
||
};
|
||
```
|
||
|
||
### 工具栏配置
|
||
|
||
工具栏包含以下主要功能组：
|
||
- **基础编辑**：撤销、重做、格式刷等
|
||
- **文本格式**：字体、字号、颜色、背景色等
|
||
- **段落格式**：对齐、缩进、行距等
|
||
- **插入功能**：图片、视频、表格、链接等
|
||
- **高级功能**：代码、公式、模板等
|
||
|
||
## 注意事项
|
||
|
||
1. **ID唯一性**：每个UEditor实例必须有唯一的ID
|
||
2. **数据绑定**：使用v-model进行双向数据绑定
|
||
3. **表单验证**：在表单验证规则中正确处理富文本内容
|
||
4. **内容处理**：提交时注意HTML内容的处理和安全过滤
|
||
5. **性能优化**：避免在同一个页面中使用过多编辑器实例
|
||
|
||
## 常见问题
|
||
|
||
### Q: 编辑器不显示怎么办？
|
||
A: 检查是否正确导入了组件，确保ID唯一，检查控制台是否有错误信息。
|
||
|
||
### Q: 图片上传失败怎么办？
|
||
A: 检查serverUrl配置是否正确，确保后端接口正常工作。
|
||
|
||
### Q: 如何获取纯文本内容？
|
||
A: 可以通过正则表达式去除HTML标签：`content.replace(/<[^>]*>/g, '')`
|
||
|
||
### Q: 编辑器高度可以调整吗？
|
||
A: 可以通过initialFrameHeight配置项调整，也支持动态调整。
|
||
|
||
## 更多示例
|
||
|
||
更多使用示例请参考：
|
||
- `src/views/business/case-clinical-article/case-clinical-article-form.vue`
|
||
- `src/components/business/ueditor.vue` |