244 lines
6.6 KiB
Markdown
244 lines
6.6 KiB
Markdown
# 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 编辑器已成功集成到项目中，提供了完整的富文本编辑体验：
|
||
|
||
- ✅ 功能完整：包含所有常用编辑功能
|
||
- ✅ 用户体验：自动保存、实时预览、使用指南
|
||
- ✅ 数据一致：编辑器、预览、发布内容完全一致
|
||
- ✅ 响应式设计：支持各种设备访问
|
||
- ✅ 易于维护：清晰的代码结构和配置
|
||
|
||
现在您可以开始使用这个强大的富文本编辑器来创建和管理文档了！🎉 |