CKEditor5定制及文件上传

wudengyu2023-09-01 13:36

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"，文档里面也没说，是查看了请求包的内容才知道的。