百度编辑器(UEditor)+layer弹框+自定义上传图片

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/]

上一篇:李宏毅深度学习——深度学习介绍


下一篇:Mars3D开发基础学习:三维场景 Map