富文本编辑器配置及二次扩展
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调试
- 不要浮躁，心态放平
- 注重平时知识经验的积累