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老师，以及各位学员。。。。

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

EasyExcel 设置字体样式（字体、字体大小、字体颜色、字体加粗、字体斜体、字体下划线、字体上标下标、字体删除线）
1 Maven配置 <dependency><groupId>cn.hutool</groupId><artifa ...
php单元格字体颜色,PHPExcel API接口用法大全，按模板导入excel，美化excel，导出图片，设置单元格字体颜色背景色边框，合并单元格，设置行高列宽...
PHPExcel API接口用法大全,按模板导入excel,美化excel,导出图片,设置单元格字体颜色背景色边框,合并单元格,设置行高列宽 2020-08-31 85 一:读取excel表模板$ph ...
easypoi导出excel不设置样式_EasyPOI 导出excel设置边框，背景颜色，字体样式
EasyPOI 导出excel设置边框,背景颜色,字体样式 EasyPOI 导出代码示例ExportParams exportParams = new ExportParams(); exportPa ...
seaborn使用boxplot函数进行箱图可视化（使用色彩调色板自定义设置箱图的颜色、在boxplot函数内设置palette参数自定义调色板）
seaborn使用boxplot函数进行箱图可视化(使用色彩调色板自定义设置箱图的颜色.在boxplot函数内设置palette参数自定义调色板) 目录
R语言ggplot2可视化分组散点图、使用scale_shape_manual函数、scale_color_manual函数、scale_size_manual函自定义设置分组散点的形状、大小、颜色
R语言ggplot2可视化分组散点图.使用scale_shape_manual函数.scale_color_manual函数.scale_size_manual函数自定义设置分组散点的形状.大小.颜色 ...
shell中设置文字输出的颜色及字体格式
shell中设置文字输出的颜色及字体格式 1.Linux中设置文本颜色及背景色 Shell 使用 ANSI 转义码 (ANSI escape codes) 进行颜色输出.转义序列颜色输出表如下颜色 ...
html字体颜色 html中设置字体颜色代码字体颜色获取
html字体颜色 html中设置字体颜色代码字体颜色获取 html字体颜色设置更改,html设置字体颜色代码方法有哪些 DIVCSS5为大家介绍在html中设置字体颜色方法,字体颜色修改方法,字体颜 ...
android设置webview光标颜色,CSS自定义设置元素闪烁光标颜色
这次给大家带来CSS自定义设置元素闪烁光标颜色,CSS自定义设置元素闪烁光标颜色的注意事项有哪些,下面就是实战案例,一起来看一下. 前言因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不 ...
seaborn使用boxplot函数进行箱图可视化（使用色彩调色板自定义设置箱图的颜色、自定义颜色列表、并创建为自己的调色板、sns.set_palette全局设置palette参数）
seaborn使用boxplot函数进行箱图可视化(使用色彩调色板自定义设置箱图的颜色.自定义颜色列表.并创建为自己的调色板.sns.set_palette全局设置palette参数) 目录

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

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

最新文章

热门文章