# CKEditor 4 集成说明
## 📋 功能概述
`editorDocument.vue` 页面已集成 CKEditor 4 富文本编辑器，具备以下功能：
- ✅ **富文本编辑** - 完整的文本格式化功能
- ✅ **发布功能** - 一键发布文档到后端
- ✅ **预览功能** - 实时预览文档效果
- ✅ **使用指南** - 详细的操作说明
- ✅ **自动保存草稿** - 30秒自动保存到本地存储
## 🚀 快速开始
### 1. 引入 CKEditor 4
在 `public/index.html` 中添加 CKEditor 4 的 CDN 引入：
```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 编辑器已成功集成到项目中，提供了完整的富文本编辑体验：
- ✅ 功能完整：包含所有常用编辑功能
- ✅ 用户体验：自动保存、实时预览、使用指南
- ✅ 数据一致：编辑器、预览、发布内容完全一致
- ✅ 响应式设计：支持各种设备访问
- ✅ 易于维护：清晰的代码结构和配置
现在您可以开始使用这个强大的富文本编辑器来创建和管理文档了！🎉