190 lines
3.6 KiB
Markdown
190 lines
3.6 KiB
Markdown
# 富文本编辑器页面
|
||
|
||
完整的富文本编辑器功能页面，包含编辑、预览、导出等功能。
|
||
|
||
## 路由配置
|
||
|
||
在路由文件中添加以下配置：
|
||
|
||
```typescript
|
||
{
|
||
path: '/editor',
|
||
name: 'RichTextEditor',
|
||
component: () => import('@/views/public/editor/RichTextEditorView.vue'),
|
||
meta: {
|
||
title: '富文本编辑器',
|
||
requiresAuth: true
|
||
}
|
||
}
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
### 📝 编辑功能
|
||
- ✅ 完整的富文本编辑器
|
||
- ✅ 实时字数统计
|
||
- ✅ 字数限制设置
|
||
- ✅ 自动保存（每30秒）
|
||
- ✅ 手动保存到本地存储
|
||
|
||
### 👁️ 预览功能
|
||
- ✅ 实时预览编辑内容
|
||
- ✅ 复制HTML代码
|
||
- ✅ 弹窗预览模式
|
||
|
||
### 💾 导出功能
|
||
- ✅ 导出为HTML
|
||
- ✅ 导出为纯文本
|
||
- ✅ 导出为Markdown
|
||
- ✅ 自定义文件名
|
||
|
||
### 🎨 界面特性
|
||
- ✅ 响应式设计
|
||
- ✅ 美观的卡片布局
|
||
- ✅ 功能介绍卡片
|
||
- ✅ 移动端适配
|
||
|
||
## 使用示例
|
||
|
||
### 1. 基础编辑
|
||
|
||
```vue
|
||
<template>
|
||
<RichTextEditorView />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import RichTextEditorView from '@/views/public/editor/RichTextEditorView.vue';
|
||
</script>
|
||
```
|
||
|
||
### 2. 集成到系统菜单
|
||
|
||
在菜单配置中添加：
|
||
|
||
```json
|
||
{
|
||
"menuID": "editor",
|
||
"name": "富文本编辑器",
|
||
"url": "/editor",
|
||
"icon": "Edit",
|
||
"type": 1,
|
||
"orderNum": 10
|
||
}
|
||
```
|
||
|
||
## 快捷键
|
||
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| Ctrl/Cmd + S | 保存 |
|
||
| Ctrl/Cmd + B | 加粗 |
|
||
| Ctrl/Cmd + I | 斜体 |
|
||
| Ctrl/Cmd + U | 下划线 |
|
||
| Ctrl/Cmd + Z | 撤销 |
|
||
| Ctrl/Cmd + Y | 重做 |
|
||
|
||
## 本地存储
|
||
|
||
页面使用localStorage保存内容：
|
||
|
||
- `rich_text_content`: 手动保存的内容
|
||
- `rich_text_content_auto`: 自动保存的内容
|
||
- `rich_text_saved_at`: 保存时间戳
|
||
|
||
## 自定义配置
|
||
|
||
### 修改编辑器高度
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
const editorHeight = ref('600px'); // 默认500px
|
||
</script>
|
||
```
|
||
|
||
### 修改自动保存间隔
|
||
|
||
```typescript
|
||
// 默认30秒
|
||
autoSaveTimer = window.setInterval(() => {
|
||
// ...
|
||
}, 60000); // 改为60秒
|
||
```
|
||
|
||
### 修改字数限制
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
const maxLength = ref(10000); // 默认5000
|
||
</script>
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **依赖安装**：确保已安装 `quill` 依赖
|
||
2. **图片上传**：默认使用base64，大图片可能影响性能
|
||
3. **浏览器兼容**：现代浏览器支持，IE需要polyfill
|
||
4. **数据持久化**：localStorage有存储限制（通常5-10MB）
|
||
|
||
## 扩展功能建议
|
||
|
||
### 1. 图片上传到服务器
|
||
|
||
```typescript
|
||
// 配置Quill图片上传处理器
|
||
const quill = new Quill(editor, {
|
||
modules: {
|
||
toolbar: {
|
||
handlers: {
|
||
image: imageHandler
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
function imageHandler() {
|
||
const input = document.createElement('input');
|
||
input.setAttribute('type', 'file');
|
||
input.setAttribute('accept', 'image/*');
|
||
input.click();
|
||
|
||
input.onchange = async () => {
|
||
const file = input.files[0];
|
||
// 上传到服务器
|
||
const url = await uploadImage(file);
|
||
const range = quill.getSelection();
|
||
quill.insertEmbed(range.index, 'image', url);
|
||
};
|
||
}
|
||
```
|
||
|
||
### 2. 协同编辑
|
||
|
||
可以集成WebSocket实现多人协同编辑功能。
|
||
|
||
### 3. 版本历史
|
||
|
||
保存多个版本的内容，支持版本回退。
|
||
|
||
### 4. 模板功能
|
||
|
||
预设多种文档模板，快速开始编辑。
|
||
|
||
## 故障排除
|
||
|
||
### 问题1：编辑器无法显示
|
||
|
||
**原因**：Quill依赖未安装
|
||
**解决**：运行 `npm install quill`
|
||
|
||
### 问题2：样式异常
|
||
|
||
**原因**：Quill CSS未加载
|
||
**解决**：确保组件中导入了 `quill/dist/quill.snow.css`
|
||
|
||
### 问题3：内容丢失
|
||
|
||
**原因**：浏览器清除了localStorage
|
||
**解决**：使用服务器存储或定期导出备份
|
||
|