# 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
**状态**: ✅ 正常