198 lines
3.4 KiB
Markdown
198 lines
3.4 KiB
Markdown
# CKEditor 4 npm安装和使用指南
|
||
|
||
## 安装完成 ✅
|
||
|
||
CKEditor 4 已成功通过npm安装到项目中：
|
||
|
||
```bash
|
||
npm install ckeditor4
|
||
```
|
||
|
||
## 安装信息
|
||
|
||
- **包名**: ckeditor4
|
||
- **版本**: 4.25.1
|
||
- **安装位置**: `node_modules/ckeditor4/`
|
||
- **依赖状态**: 已添加到 `package.json` 的 dependencies 中
|
||
|
||
## 配置说明
|
||
|
||
### 1. 全局引入
|
||
|
||
在 `src/main.js` 中添加了全局引入：
|
||
|
||
```javascript
|
||
// 引入CKEditor 4
|
||
import 'ckeditor4'
|
||
```
|
||
|
||
### 2. 编辑器组件
|
||
|
||
编辑器组件位于：`src/views/editorDocument.vue`
|
||
|
||
主要功能：
|
||
- ✅ 富文本编辑
|
||
- ✅ 自动保存草稿
|
||
- ✅ 实时预览
|
||
- ✅ 发布功能
|
||
- ✅ 错误处理
|
||
- ✅ 加载状态显示
|
||
|
||
### 3. 路由配置
|
||
|
||
编辑器页面路由已配置：
|
||
- **路径**: `/editorDocument`
|
||
- **组件**: `EditorDocument`
|
||
- **权限**: `all` (所有用户可访问)
|
||
|
||
## 使用方法
|
||
|
||
### 访问编辑器
|
||
|
||
1. 启动开发服务器：
|
||
```bash
|
||
npm run serve
|
||
```
|
||
|
||
2. 访问编辑器页面：
|
||
```
|
||
http://localhost:8080/editorDocument
|
||
```
|
||
|
||
### 编辑器功能
|
||
|
||
1. **基本编辑**
|
||
- 文字格式化（粗体、斜体、下划线）
|
||
- 字体颜色和背景色
|
||
- 文本对齐
|
||
- 列表（有序/无序）
|
||
- 链接和图片插入
|
||
|
||
2. **文档管理**
|
||
- 自动保存（每30秒）
|
||
- 草稿恢复
|
||
- 手动保存
|
||
- 发布文档
|
||
|
||
3. **预览功能**
|
||
- 实时预览
|
||
- 弹窗预览
|
||
|
||
## 故障排除
|
||
|
||
### 常见问题
|
||
|
||
1. **编辑器不显示**
|
||
- 检查控制台是否有错误信息
|
||
- 确认 `ckeditor4` 包已正确安装
|
||
- 检查网络连接
|
||
|
||
2. **工具栏不完整**
|
||
- 检查编辑器配置中的 `toolbar` 设置
|
||
- 确认所有需要的插件都已加载
|
||
|
||
3. **中文显示问题**
|
||
- 确认语言包已正确加载
|
||
- 检查 `language` 配置项
|
||
|
||
### 调试方法
|
||
|
||
1. **查看控制台**
|
||
```javascript
|
||
console.log('CKEditor状态:', typeof window.CKEDITOR)
|
||
```
|
||
|
||
2. **检查编辑器实例**
|
||
```javascript
|
||
console.log('编辑器实例:', this.editorInstance)
|
||
```
|
||
|
||
3. **测试编辑器功能**
|
||
- 点击"插入测试内容"按钮
|
||
- 尝试各种编辑功能
|
||
- 检查自动保存是否工作
|
||
|
||
## 配置选项
|
||
|
||
### 编辑器配置
|
||
|
||
```javascript
|
||
editorConfig: {
|
||
height: 400,
|
||
language: 'zh-cn',
|
||
toolbar: [
|
||
// 工具栏配置
|
||
],
|
||
removeButtons: '',
|
||
format_tags: 'p;h1;h2;h3;pre',
|
||
removeDialogTabs: 'image:advanced;link:advanced'
|
||
}
|
||
```
|
||
|
||
### 自定义配置
|
||
|
||
可以根据需要修改以下配置：
|
||
|
||
1. **工具栏按钮**
|
||
- 添加/删除工具栏按钮
|
||
- 自定义按钮分组
|
||
|
||
2. **编辑器高度**
|
||
- 修改 `height` 属性
|
||
|
||
3. **语言设置**
|
||
- 修改 `language` 属性
|
||
|
||
4. **内容样式**
|
||
- 修改 `contentsCss` 属性
|
||
|
||
## 生产环境部署
|
||
|
||
### 构建项目
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 注意事项
|
||
|
||
1. **文件大小**
|
||
- CKEditor会增加构建包的大小
|
||
- 考虑使用CDN版本以减少包大小
|
||
|
||
2. **性能优化**
|
||
- 可以按需加载编辑器
|
||
- 考虑使用懒加载
|
||
|
||
3. **兼容性**
|
||
- 确保目标浏览器支持CKEditor 4
|
||
- 测试各种设备和浏览器
|
||
|
||
## 更新和维护
|
||
|
||
### 更新CKEditor
|
||
|
||
```bash
|
||
npm update ckeditor4
|
||
```
|
||
|
||
### 版本兼容性
|
||
|
||
- 当前版本：4.25.1
|
||
- 支持Vue 2.x
|
||
- 支持现代浏览器
|
||
|
||
## 技术支持
|
||
|
||
如果遇到问题，可以：
|
||
|
||
1. 查看CKEditor官方文档
|
||
2. 检查项目控制台错误信息
|
||
3. 查看网络请求状态
|
||
4. 测试编辑器基本功能
|
||
|
||
---
|
||
|
||
**安装完成时间**: 2024年
|
||
**安装方式**: npm
|
||
**状态**: ✅ 正常 |