CKEditor5 插件扩展

在一个react项目中需要使用富文本编辑器，选择了CKEditor5。

基本使用

官方文档很详细，安装依赖引入组件。https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

但是官方的示例中默认的功能较少，例如字体大小，颜色等，需要自己去添加。

我们需要自己修改 ckeditor5-build-classic，重新编译，再替换react项目中的ckeditor5-build-classic

1. 克隆并安装依赖

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
npm install

2. 添加插件
   安装需要的插件
   我这里安装了三个
   npm install --save @ckeditor/ckeditor5-alignment
   @ckeditor/ckeditor5-font
   @ckeditor/ckeditor5-horizontal-line

   打开克隆来的src文件夹下的ckeditor.js，引入安装的插件
   

在 builtinPlugins 中添加导入的变量(图中最后三个)

tollbar 中添加(这里是默认的tollbar，可加可不加，项目中引用的时候可以自己在配置加上)

这里注意要是改中文的话，webpack配置文件中也要改，必须要相同

3. 编译，替换文件

   npm run build
   

将 build 下的文件替换到react项目中

4. react 项目中引入
   
5. 重新编译运行自己的项目，就行了
6. 

参考：
https://blog.csdn.net/qq_24134853/article/details/99300491
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html