富文本编辑器ckeditor5的配置及二次扩展

富文本编辑器配置及二次扩展

1.官网地址

• 一般遇到的问题，官网的文档都会有答案

https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html

2.项目背景

• 新项目需要支持富文本编辑器操作，综合选择后使用 ckeditor5
• 遇到问题，支持用户自定义上传视频功能
• 自定义开发流程 源码修改-打包-现有项目引入
• 注意：基本配置需要在ckeditor-pack统一配置，避免每个项目单独配置

3.源码目录结构

• sample/index.html 修改配置可以本地运行demo
• src/plugins 扩展现有插件位置（新增）
• src/ckeditor.ts 主入口文件

4.基本配置

• builtinPlugins 插件列表
• defaultConfig 默认配置 后续修改需统一在此处修改，避免在各自项目中多次配置

5.如何扩展

• 目标：实现支持用户自定义上传的功能，增加上传按钮

• 效果图如下：

• 思路

  • 官网找到新增功能对应的插件 ckeditor5-media-embed

• npm下载该包，放入src/plugins目录下

  • 查看源码，定位到代码位置，修改源码（如何查看源码？ ）

• 步骤

定位到代码位置，修改代码新增功能，主要代码如下：

在主入口文件ckeditor.ts导入 ，注释掉原有包导入，引入二次扩展包

打包运行生成打包文件

本地运行 sample/index.html ，查看效果

项目中引入打包文件

6.如何阅读源码

• 看见后面忘记前面，可以使用vscode插件 Bookmarks
• 读函数的时候忘记传参，调用的时候截图对比，手动直接赋值查看效果
• debugger调试
• 不要浮躁，心态放平
• 注重平时知识经验的积累