1.弹出渲染时需要注意的是layer弹出层的z-index层级默认高于ueditor图片上传等控件的层级,因此需要根据需求手动设置下layer弹出层级。目前我设置的layer弹出框层级为1。
2.另外还需要在弹出后延时渲染ueditor,在关闭弹出层时销毁ueditor对象。
3.前端动态配置图片上传地址。由于图片保存到数据库中的地址为相对路径,因此需要配置图片回显地址前缀,该处我在前端进行配置。
点击查看代码
//ueditor对象
var ue = null;
//ueditor内容
var ueContent = '';
//图片上传地址
var uploadUrl = 'http://xxx';
//图片回显地址前缀
var fs_site = 'http://xxx';
//重写ueditor的getActionUrl方法,该方法为根据上传行为获取对应URL地址。当action为uploadimage时(图片上传),使用自定义上传地址。
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action){
if('uploadimage' == action){
return uploadUrl ;
}else{
return this._bkGetActionUrl.call(this, action);
}
};
//销毁ueditor对象
function destoryUeditor(){
ue.destroy();
ue = null;
}
layer.open({
type: 1,
content: $('#ue_edit_module'),
area: ['60%', '90%'],
//自定义设置,保住弹框层级低于ueditor即可
zIndex:1,
btn: ['确定', '取消'],
yes: function(index, layero){
ueContent = ue.getContent();
//关闭弹出层时销毁ueditor对象
destoryUeditor();
layer.close(index);
},
btn2: function(index, layero){
//关闭弹出层时销毁ueditor对象
destoryUeditor();
layer.close(index)
},
cancel: function() {
//关闭弹出层时销毁ueditor对象
destoryUeditor();
},
success: function () {
//延时渲染ueditor,此处延时100毫秒
setTimeout(function(){
//动态配置图片上传控件
var toolbars = window.UEDITOR_CONFIG.toolbars;
//若已配置过则不再配置
if(-1 == toolbars[0].indexOf('insertimage')) {
toolbars[0].push('|');
toolbars[0].push('insertimage');
}
//ueditor渲染
ue = UE.getEditor('ue_edit_box',{
toolbars:toolbars,
autoHeightEnabled: false,
initialFrameHeight : 520,
});
//ueditor渲染完成后操作
ue.addListener('ready', function () {
//定时器检测服务端ueditor/php/config.json加载情况,加载完成后动态设置图片回显地址前缀
//此处为实现前端动态配置。按照官方文档说明,该配置应该在服务端ueditor/php/config.json文件中进行配置。两种方式按需选择。
var setOptTimer = setInterval(function(){
if(ue.isServerConfigLoaded()){
ue.options.imageUrlPrefix = fs_site;
ue.setContent(ueContent);
clearInterval(setOptTimer);
}
},50);
});
},100);
}
});
4.自定义上传的方法实体返回的数据格式需按照下面格式返回,该格式参考官方接口ueditor/php/controller.php返回。
{
"state": "SUCCESS",
"url": "/image_dir/image_sub_dir/20211211111809.png",
"title": "20211211111809.png",
"original": "145450.png",
"type": ".png",
"size": "300995"
}
5.附UEditor官方文档地址:[http://fex.baidu.com/ueditor/]