使用背景:
1.业务需求:商城管理后台商品详情数据保存修改。
2.技术框架:HTML原生 代码。
3.分析结果:使用富文本js插件 编辑修改保存,商品详情信息。
4.插件选择要求:文字+图片,类似word风格,社区稳定,大厂出品,代码开源。
5.最终确定使用:ckeditor ,最新版本:ckeditor-5
6.项目时间 : 2022年5月6日
下面演示:html原生代码,使用j引用的方式,定制 ckeditor-5 功能:
一、打开 ckeditor-5 定制网站,进行插件定制以及下载:
1.打开地址:选择 【经典模式】 classic,
(其他模式没有尝试、本项目不需要,有愿意尝试的同学自行尝试、探索。)
https://ckeditor.com/ckeditor-5/online-builder/
截图↓:

2.根据项目需要,选择,插件的功能:
下面是我这边下面需要的所有的插件,请大家参考:
(常规:字体,字号大小,字体颜色,背景色,图片上传,图片复制粘贴等)

点击:Next step 下一步:

3.定制工具,效果及调整:
将第一排的功能,拖到 第二排,最后会导出第二排的功能插件。

点击 下一步:

4.选择语言:
选择Chinese,然后点击 下一步:

5.开始【开始生成:定制的功能插件】
点击:start(开始)

正在生成:

等一会:

6.定制代码生成完成。
点击【Download your custom CKEditor 5 build】 下载
找到 刚下载的 zip文件:右击选择 解压到 " ********** "
7.今天选到这,有时间补充

本文介绍了在商城管理后台中,为商品详情页面选用ckeditor-5作为富文本编辑器的过程。通过ckeditor-5在线定制工具,选择了包括字体、字号、颜色、图片上传等功能,并定制为经典模式,支持中文。最终下载并集成到HTML原生代码中,以实现类似word风格的商品详情编辑和保存。
1万+





