ckeditor 使用说明,手把手,详细步骤: ckeditor-5 online-builder,持续更新中~~

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

使用背景:

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.今天选到这,有时间补充

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一轮大月亮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值