标签：function UEditor layer 自定义 ueditor toolbars 弹出 ue 上传
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/]
标签：function,UEditor,layer,自定义,ueditor,toolbars,弹出,ue,上传 来源： https://www.cnblogs.com/trot/p/15674831.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。