CKEditor5定制及文件上传

CKEditor4已从2023年6月开始停止支持,所以最好还是升级到CKEditor5。CKEditor5在使用上与CKEditor4在使用层面上还是有很大的不同,首先,CKEditor4完全可以下载包含了所有功能的full包,通过配置选择需要的功能,只有希望尽量减小文件大小时用更少功能的版本,但CKEditor5并没有预编译好的Full,只能自己编译;另外,CKEditor5有的功能,并不包含在预构建版本中,只能自己编译,比如说Simple upload adapter,这个组件没有,就没办法上传图片,只能用在一些简单的场合了。所以,要用好CKEditor5就需要定制。

CKEditor5定制需要node.js开发环境,但实际上并不需要掌握node.js开发,只需要照CKEditor5的文档操作就行,主要也就是用到了npm和webpack这两个功能。定制的时候要注意在

webpack.config.js文件中配置output导出Editor模块。如下:

javascript 复制代码
output: {
	path: path.resolve( __dirname, 'dist' ),
	filename: 'ckeditor.js',
    library: 'ClassicEditor',
    libraryTarget: 'umd', 
    libraryExport: 'default' 	}, 

这样就可以像预编译的一样,在HTML中进行配置。否则,修改配置就要重新编译CKEditor项目,很麻烦。当然,如果项目本身就是node.js开发的、集成在一起的,就不存在麻烦。

另一个,Simple upload adapter组件需要服务器支持,也就是需要写一个controller来接收上传的文件,这也没什么好说的,只是multipart请求的RequestParam是"upload",而不是"file",文档里面也没说,是查看了请求包的内容才知道的。

相关推荐
菜鸟una11 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
前端初见15 小时前
快速上手TypeScript,TS速通
javascript·ubuntu·typescript
郑板桥3020 小时前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
Java陈序员1 天前
免费高颜值!一款跨平台桌面端视频资源播放器!
vue.js·typescript·electron
菜鸟una2 天前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
还是大剑师兰特2 天前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
一点七加一2 天前
Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇
开发语言·javascript·华为·typescript·ecmascript·harmonyos
还是大剑师兰特2 天前
TypeScript 面试题及详细答案 100题 (61-70)-- 泛型(Generics)
typescript·大剑师·typescript教程·typescript面试题
Linsk2 天前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化
濮水大叔2 天前
VonaJS AOP编程:魔术方法
typescript·nodejs·nestjs