6.6 KiB

Raw Blame History

CKEditor 4 集成说明

📋 功能概述

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

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

🚀 快速开始

1. 引入 CKEditor 4

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

<!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 中添加路由：

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 编辑器。

🛠️ 功能详解

编辑器配置

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)
保存内容: 标题、内容、类型、时间戳
状态显示: 实时显示保存状态

// 自动保存逻辑
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 类确保预览和最终显示一致：

.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; /* 圆点紧靠文字 */
  }
}

响应式设计

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

📱 使用指南

基本操作

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

快捷键

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

工具栏功能

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

🔧 自定义配置

修改工具栏

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

修改自动保存间隔

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

添加自定义插件

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 编辑器已成功集成到项目中，提供了完整的富文本编辑体验：

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

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

6.6 KiB Raw Blame History Unescape Escape