# CKEditor 4 集成说明

## 📋 功能概述

`editorDocument.vue` 页面已集成 CKEditor 4 富文本编辑器，具备以下功能：

- ✅ **富文本编辑** - 完整的文本格式化功能
- ✅ **发布功能** - 一键发布文档到后端
- ✅ **预览功能** - 实时预览文档效果
- ✅ **使用指南** - 详细的操作说明
- ✅ **自动保存草稿** - 30秒自动保存到本地存储

## 🚀 快速开始

### 1. 引入 CKEditor 4

在 `public/index.html` 中添加 CKEditor 4 的 CDN 引入：

```html
<!DOCTYPE html>
<html>
<head>
  <!-- 其他标签 -->
  
  <!-- CKEditor 4 引入 -->
  <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
  
  <!-- 中文语言包 -->
  <script src="https://cdn.ckeditor.com/4.16.2/standard/lang/zh-cn.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>
```

### 2. 路由配置

在 `src/router/index.js` 中添加路由：

```javascript
import Vue from 'vue'
import Router from 'vue-router'

// 引入编辑器页面
import EditorDocument from '@/views/editorDocument.vue'

export default new Router({
  routes: [
    // 其他路由...
    {
      path: '/editor',
      name: 'EditorDocument',
      component: EditorDocument,
      meta: {
        title: 'CKEditor 文档编辑器'
      }
    }
  ]
})
```

### 3. 访问页面

访问 `/editor` 路径即可使用 CKEditor 4 编辑器。

## 🛠️ 功能详解

### 编辑器配置

```javascript
editorConfig: {
  height: 400,                    // 编辑器高度
  language: 'zh-cn',              // 中文界面
  toolbar: [                      // 工具栏配置
    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates'] },
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
    '/',
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
    { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },
    '/',
    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
    { name: 'colors', items: ['TextColor', 'BGColor'] },
    { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
  ]
}
```

### 自动保存功能

- **自动保存间隔**: 30秒
- **保存位置**: 浏览器本地存储 (localStorage)
- **保存内容**: 标题、内容、类型、时间戳
- **状态显示**: 实时显示保存状态

```javascript
// 自动保存逻辑
autoSave() {
  if (!this.documentForm.content || this.documentForm.content === this.lastSavedContent) {
    return
  }
  
  const draftData = {
    title: this.documentForm.title,
    content: this.documentForm.content,
    type: this.documentForm.type,
    timestamp: new Date().toISOString()
  }
  
  localStorage.setItem('ckeditor_draft', JSON.stringify(draftData))
  this.lastSavedContent = this.documentForm.content
}
```

### 发布功能

集成后端 `addDocument` API，支持：

- 文档标题验证
- 文档类型选择
- 内容获取和传输
- 发布状态反馈
- 成功后清空本地草稿

## 🎨 样式特性

### 统一内容显示

使用 `.content-display` 类确保预览和最终显示一致：

```css
.content-display {
  white-space: pre-wrap !important;    /* 保持空格和换行 */
  word-wrap: break-word !important;    /* 防止长单词溢出 */
  word-break: break-word !important;   /* 长单词换行 */
  
  /* 列表样式优化 */
  :deep(ul), :deep(ol) {
    padding-left: 0 !important;
    list-style-position: inside !important; /* 圆点紧靠文字 */
  }
}
```

### 响应式设计

- 移动端适配
- 工具栏自适应
- 快捷键说明

## 📱 使用指南

### 基本操作

1. **创建文档**: 输入标题和选择类型
2. **编辑内容**: 使用CKEditor工具栏进行格式化
3. **预览效果**: 点击"预览文档"查看最终效果
4. **保存草稿**: 点击"保存草稿"或等待自动保存
5. **发布文档**: 点击"发布文档"正式发布

### 快捷键

- `Ctrl + B` - 粗体
- `Ctrl + I` - 斜体  
- `Ctrl + U` - 下划线
- `Ctrl + K` - 插入链接
- `Ctrl + Z` - 撤销
- `Ctrl + Y` - 重做

### 工具栏功能

- **文字格式**: 粗体、斜体、下划线、删除线
- **颜色设置**: 字体颜色、背景颜色
- **对齐方式**: 左对齐、居中、右对齐、两端对齐
- **列表功能**: 有序列表、无序列表
- **插入功能**: 链接、图片、表格
- **视图功能**: 源码查看、全屏编辑

## 🔧 自定义配置

### 修改工具栏

```javascript
toolbar: [
  // 自定义工具栏按钮
  { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
  { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
  { name: 'links', items: ['Link', 'Unlink'] }
]
```

### 修改自动保存间隔

```javascript
startAutoSave() {
  this.autoSaveTimer = setInterval(() => {
    this.autoSave()
  }, 60000) // 改为60秒
}
```

### 添加自定义插件

```javascript
editorConfig: {
  extraPlugins: 'your-custom-plugin',
  // 其他配置...
}
```

## 🐛 常见问题

### Q: CKEditor 未加载？
A: 确保在 `index.html` 中正确引入了 CKEditor 的 CDN 脚本。

### Q: 中文界面不显示？
A: 确保引入了中文语言包 `zh-cn.js`。

### Q: 自动保存不工作？
A: 检查浏览器是否支持 localStorage，以及是否有足够权限。

### Q: 预览样式不一致？
A: 确保使用了 `.content-display` 样式类，并检查CSS优先级。

## 📚 相关资源

- [CKEditor 4 官方文档](https://ckeditor.com/docs/ckeditor4/)
- [CKEditor 4 API 文档](https://ckeditor.com/docs/ckeditor4/latest/api/)
- [CKEditor 4 配置指南](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html)

## 🎯 总结

CKEditor 4 编辑器已成功集成到项目中，提供了完整的富文本编辑体验：

- ✅ 功能完整：包含所有常用编辑功能
- ✅ 用户体验：自动保存、实时预览、使用指南
- ✅ 数据一致：编辑器、预览、发布内容完全一致
- ✅ 响应式设计：支持各种设备访问
- ✅ 易于维护：清晰的代码结构和配置

现在您可以开始使用这个强大的富文本编辑器来创建和管理文档了！🎉 