CKEditor5 功能追加 自定义设置：段落对齐 字体颜色 背景色 字体大小等配置添加

CKEditor5功能追加

CKEditor5的安装详见官网：

/ckeditor-5/demo/

如上图所示：ckeditor5只默认了字体加粗，斜体，加入链接等功能，如果想要其他常用功能（如：对齐，字体颜色，背景色等）则需要手动添加。

下面实例添加下述6项功能：

'alignment'（对齐）,

'Highlight'（重点显示）,

'fontSize'（字号）,

'fontFamily'（字体）,

'fontColor'（字体颜色）,

'fontBackgroundColor'（字体背景色）,

详细步骤：

1，打开下载到本地的ckeditor.js文件

1-1，导入如下组件包：

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily'

import FontSize from '@ckeditor/ckeditor5-font/src/fontSize'

import FontColor from '@ckeditor/ckeditor5-font/src/fontColor'

import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontBackgroundColor'

1-2，在ClassicEditor.builtinPlugins中加入对应功能组件名字（注意大小写）：

Alignment,

Highlight,

FontFamily ,

FontSize,

FontColor,

FontBackgroundColor,

1-3，在ClassicEditor.defaultConfig的items中加入对应功能组件名字（注意大小写）：

'alignment',

'Highlight',

'fontSize',

'fontFamily',

'fontColor',

'fontBackgroundColor',

2，在dos命令中执行 cnpm run build命令。

待命令执行完毕（可能会耗时1分钟，不要着急哦）

上述命令执行完毕，build文件夹中的ckeditor.js文件自动更新版本 。

3，此时打开sample文件夹中的index.html文件可以发现，新追加的上述功能已经全部成功加载进去了。

添加完后效果。。。

感谢Softcits团队，Jimmy老师，以及各位学员。。。。