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

CKEditor5 功能追加

CKEditor5的安装详见官网：

https://ckeditor.com/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老师，以及各位学员。。。。