# 富文本编辑器页面

完整的富文本编辑器功能页面，包含编辑、预览、导出等功能。

## 路由配置

在路由文件中添加以下配置：

```typescript
{
  path: '/editor',
  name: 'RichTextEditor',
  component: () => import('@/views/editor/RichTextEditorView.vue'),
  meta: {
    title: '富文本编辑器',
    requiresAuth: true
  }
}
```

## 功能特性

### 📝 编辑功能
- ✅ 完整的富文本编辑器
- ✅ 实时字数统计
- ✅ 字数限制设置
- ✅ 自动保存（每30秒）
- ✅ 手动保存到本地存储

### 👁️ 预览功能
- ✅ 实时预览编辑内容
- ✅ 复制HTML代码
- ✅ 弹窗预览模式

### 💾 导出功能
- ✅ 导出为HTML
- ✅ 导出为纯文本
- ✅ 导出为Markdown
- ✅ 自定义文件名

### 🎨 界面特性
- ✅ 响应式设计
- ✅ 美观的卡片布局
- ✅ 功能介绍卡片
- ✅ 移动端适配

## 使用示例

### 1. 基础编辑

```vue
<template>
  <RichTextEditorView />
</template>

<script setup lang="ts">
import RichTextEditorView from '@/views/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
**解决**：使用服务器存储或定期导出备份