ueditor使用中的问题总结_ueditor imageheaders-CSDN博客

本文链接：https://blog.csdn.net/pyxly1314/article/details/50517453

1、使用ctr+c 和 ctr+v 时，或导致重新抓取远程图片的问题；解决方案：修改 ueditor.config.js 在 window.UEDITOR_CONFIG 中增加 catchRemoteImageEnable:false 配置项。

2、在页面中实例化使用ueditor,并且自定义按钮

 var editorOption = {
		        //这里可以选择自己需要的工具按钮名称,从ueditor.config.js中选择适合自己的按钮
		        toolbars: [[ 'fullscreen', 'source', '|', 
		                     'undo', 'redo', '|',
		                     'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
		                     'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
		                     'paragraph', 'fontsize', '|',
		                     'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
		                     'link', 'unlink', 'anchor', '|', 'insertframe', '|',
		                     'insertvideo','insertimage','simpleupload','attachment','|',
		                     'template','preview']],
		        elementPathEnabled: false,
		        initialFrameHeight:800,//设置控件的宽度
		        initialFrameWidth:890 //设置控件的宽度
		    };

3、调用，并且自定义传递参数

$("#ueditorContainer").append(" <div id=\"editor-article\" style=\"display:block\"></div>");
	
	var ue = UE.getEditor('editor-article',editorOption);
	ue.addListener("ready", function () {
  	 ue.execCommand('serverparam', {
  		 //将图片上传到阿里云的OSS服务器的article文件夹下面
  		 'folderName':'article',
  		});
	});

4、多图上传时，修改图片的尺寸，按比例压缩。解决方案：ueditor/jsp/config.json 文件中修配置，按照长边等比压缩

"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 8800, /* 图片压缩最长边限制 */

5、单图上传修改图片尺寸，就只能在源码中修改了；解决方案：修改 ueditor.all.js 中 UE.plugin.register('simpleupload', function (){ ...该模块下的源码

注意看 function callback() 这个方法增加红色加粗部分的代码就可以了。

if(json.state == 'SUCCESS' && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', json.title || '');
loader.setAttribute('alt', json.original || '');
loader.setAttribute('width', 800);//luoyi 修改
loader.setAttribute('height', 600);//luoyi 修改
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
}

6、ueditor总是喜欢自动进行本地保存，如何去掉？解决方案：修改 ueditor.all.js 中 UE.plugin.register('autosave', function (){ ...该模块下的源码

注意看如下：新增红色加粗代码

'contentchange': function () {
//luoyi新增加的代码,取消本地保存功能
if (!me.getOpt('enableAutoSave')) {
return;
}

if ( !saveKey ) {
return;
}

7、关于大文件上传超时，导致前端报错。（在项目中，通过debug方式得出的结论，在使用ueditor进行大文件上传时，文件流传输耗时较长时会导致，连接超时而在js前端提前返回 “服务端错误”的错误信息，但是后台的流仍然在传输，debug看到，当文件流传输完成时，返回信息是正确的，正式前端js判断超时了。）

根本原因是：ueditor文件上传使用的是webuploader.js 这个第三方的上传插件，它的默认超时时间是 2分钟（如果我没记错）；然而大文件在2min内没法完成上传，是导致报错的问题；

所以解决方案：修改 webuploader.js 下面代码的红色加粗部分

Transport.options = {
server: '',
method: 'POST',

// 跨域时，是否允许携带cookie, 只有html5 runtime才有效
withCredentials: false,
fileVal: 'file',
timeout: 30 * 60 * 1000, // luoyi 修改为30分钟
formData: {},
headers: {},
sendAsBinary: false
};

8、多图片上传时，上传完成以后图片的顺序按照弹出框中的选择的顺序显示；

解决方案：修改 ueditor/dialogs/image/image.js文件修改为如下代码的红色加粗部分

uploader.on('uploadSuccess', function (file, ret) {
var $file = $('#' + file.id);
try {
var responseText = (ret._raw || ret),
json = utils.str2json(responseText);
if (json.state == 'SUCCESS') {
//_this.imageList.push(json);
//$file.append('<span class="success"></span>');
_this.imageList[$file.index()] = json; // 修改这里：按选择好的文件列表顺序存储//luoyi mdf
$file.append('<span class="success"></span>');
} else {
$file.find('.error').text(json.state).show();
}
} catch (e) {
$file.find('.error').text(lang.errorServerUpload).show();
}
});