ckeditor官网下载包可支持图片上传功能，原插件提供上传路径配置，浏览服务器url配置，如果需要定制一个图片上传的业务逻辑，能够校验图片尺寸，图片大小，定制上传接口等需求可以改装源码，以及监听事件来实现

ckeditor编辑器监听上传请求，如果不想走编辑器自己的上传服务，需要先stop,cancel掉，阻止编辑器默认的处理，走自己的逻辑

editor.on('fileUploadRequest', function (evt) {

evt.stop()

evt.cancel()

const imageData = evt.data.fileLoader.file

const fileName = imageData.name

const lastIndex = fileName.lastIndexOf('.')

var imageSuffix = fileName.substring(lastIndex + 1)

// 判断后缀名

if (!(imageSuffix === 'png' || imageSuffix === 'jpg' || imageSuffix === 'jpeg')) {

alert('图片格式只支持"png, jpg, jpeg格式"')

return

}

if (imageData.size > 1 * 1024 * 1024) {

alert('图片大小不能超过1M')

return

}

//自己的图片上传服务

//ajax请求完，调用xhr对象回传

evt.data.fileLoader.xhr.send(evt.data.fileLoader.file)

}

evt.data.fileLoader.file:上传文件对象

fileUploadRequest：监听上传按钮点击发出的请求，捕获该事件可以获得上传文件的基本信息：包括文件名，文件大小等

2.fileUploadResponse事件监听请求的返回，如果要拦截编辑器默认的上传完成后的操作，可以监听这个事件的处理，前提也是stop掉

 editor.on('fileUploadResponse', function (evt) { // Prevent the default response handler. evt.stop() var data = evt.data var xhr = data.fileLoader.xhr // var responseText = xhr.responseText if (xhr.responseURL) { data.url = xhr.responseURL return true } return true })

3.如何拿到图片宽高；

校验图片尺寸，在触发onok事件能拿到：

e.sender.originalElement.$.widthe.sender.originalElement.$.height

在图片插件ckeditor/plugins/image/dialogs/image.js找到图片弹窗的确定按钮点击事件加入逻辑

 onOk: function (e) { var width = e.sender.originalElement.$.width var height = e.sender.originalElement.$.height if (!(width > 360 && height > 270)) { alert('图片尺寸不符合') return } }

4.对图片文件md5加密

npm安装cryto-js

import CryptoJS from 'crypto-js'

filereader监听onload事件对文件加密

 handleFileMD5 (fileLoader) { var fileItem = fileLoader.file var reader = new FileReader() reader.onload = (function (theFile) { return function (e) { fileLoader.MD5 = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(e.target.result)).toString() } })(fileItem) reader.readAsBinaryString(fileItem) }