网上搜不到合适的例子,所以写了一个,感觉应该有一些参考价值,核心就是ckeditor中的一个属性:fileUploadRequest
下面看例子
const questionBodyEditor = CKEDITOR.replace( 'questionBodyEditor');
questionBodyEditor.on( 'fileUploadRequest', function( evt ) {
var fileLoader = evt.data.fileLoader,
formData = new FormData(),
xhr = fileLoader.xhr;
xhr.open( 'POST', fileLoader.uploadUrl, true );
const imageCom = new Image();
imageCom.src = fileLoader.data;
imageCom.onload = function() {
//尺寸阈值
const threshold = 1000;
let w = imageCom.width;
let h = imageCom.height;
if(w > threshold && h > threshold){
h = threshold * h / w;
w = threshold;
let canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = w, //压缩后图片的大小
imageHeight = h,
data = ''
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(imageCom, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg');
data = dataURLtoFile(data)
//压缩完成
formData.append( 'upload', data, fileLoader.fileName );
fileLoader.xhr.send( formData );
evt.stop();
//图片转化
function dataURLtoFile(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
上传图片接口传参较为特殊,不能直接ajax,所以用了原生xhr.send。
中间我是用了canvas做了一个简单的图片尺寸压缩,如需其他处理可以自行添加。(网上压缩图片的例子很多)
希望能帮助到更多的人。
最近项目采用CKEditor 4 富文本编辑器,上传图片时提示"不正确的服务器响应" , 查看官方文档要求返回json格式,官方示例:
Response: File Uploaded Successfully
上传成功返回:
"uploaded": 1,
"fileName": "foo.jpg",
"url": "/files/foo.jpg"
ckeditor编辑器在上传图片或文件时是没有大小限制的,下面我们来给大家介绍两种ckeditor上传图片文件大小限制问题解决办法。一种可以通过修改PHP.INI配置文件上传大小来限制,另一种方法只能手动修改Fckeditor源码,方法如下1、打开editor/filemanager/connectors/php目录下config.php,创建Config变量设置上传图片大小,这里以KB为单位1、...
提示:上回分析了ckeditor的简单应用,因为交互关系我采用的是JQurey,用的是upload的方法现在用接口联调的过程中遇到图片上传及显示的问题如下:
图片上传文件所需要的参数找不到,file
图片位置调整,尺寸调整不够便捷
数据返回后样式不符–所见即所得
保存数据和解析数据只能是行内样式标签形式
问题描述及原因分析::
//1. 图片上传文件所需要的参数找不到,file
class UploadAdapter {
constructor(l
$callback = input('CKEditorFuncNum');
$upload = $_FILES['upload'];
switch($upload['error']){
case 0://说明上传没有什么错误
break;
case 1:
1.ckeditor安装上默认是没有上传图片功能的,需要加上config.filebrowserUploadUrl = '/CKUploadPic.ashx'; 这句话指定上传的程序,底部会有全部代码贴出。
2.客户有新需求 图片上传默认最大宽度500px,但也允许用户修改更大的宽度,即如果上传时图片宽度大于500px,则默认宽度样式500px,高度按比例。如用户再次修改成800px,保存也...
因为本项目是基于vue.js开发的一个SPA,所以使用了ckeditor5官方提供的vue component,图片上传需要添加Simple upload adapter插件才能工作,但是在vue component中配置的编辑器类型是build过后的,和Simple upload adapter插件两者都引入了相同的模块,导致报重复引入模块的错误,于是参照官网的自定义适配器教程,实现了一个upload adapter。
1.安装vue组件和编辑器
npm install --save @ckeditor/
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况
本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码)
因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。
例如www.wangEditor.com 但试了一圈都不支持IE8 。
所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,只能自己想办法。
如果没有必要,不建议使用.
换成ck4后在上传图片过程中碰到的问题
需要将图片上传到公司服务器
配置过程中碰到的问题,在fileUploadResponse中打断了他默认的接口请求,图片上传成功后,没有像官网demo一样跳转到图像预览的页面
以下是配置
在config.js中
config.filebrowserUploadUrl = 'http://xxxx.com';
在调用ck的页面中