Thinkphp5 + 百度编辑器自定义上传 教程

Admin 2020-03-27 201人围观 ,发现0个评论 Thinkphp5Thinkphp框架

 Thinkphp5 + 百度编辑器自定义上传 教程 ThinkPHP框架

1、百度编辑器官方下载sdk;

 

2、在引入编辑器页面,写入js:

// 百度编辑器
            UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
            UE.Editor.prototype.getActionUrl = function (action) {                if (action == 'uploadimage' || action == 'uploadscrawl') {                    return "/alioss/file_upload_ueditor";//这就是自定义的上传地址
                } else if (action == 'uploadvideo') {                    return '';
                } else {                    return this._bkGetActionUrl.call(this, action);
                }
            }            var ue = UE.getEditor('article_content', {
                zIndex: 999,
                initialFrameWidth: "100%", //初化宽度
                initialFrameHeight: 300, //初化高度
                focus: false, //初始化时,是否让编辑器获得焦点true或false
                maximumWords: 99999, removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',//允许的最大字符数 'fullscreen',
                pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
                autoHeightEnabled: true
            });

 

其中:

/alioss/file_upload_ueditor

就是我们自定义的上传路径,原理就是拦截百度原来的上传请求,从而到达不修改百度sdk的情况下。实现自定义接口。

 

返回格式要按照如下:

/**
     * 百度编辑器上传图片
     */
    public function file_upload_ueditor(){
        
        $file = request()->file();        if (!empty($file) && isset($file['upfile'])) {

            $alioss_model = model("AliossModel");

            $upfile = $file['upfile'];
            $file_data = $upfile->getInfo();
            $path = 'thumb';
            $file_mes =  $alioss_model->file_upload($file_data,$path);

            $img_host_url = Config::get("config_set.img_host_url");

            $result = [                'state' => 'SUCCESS',                'url' => $img_host_url.$file_mes['file_path'],                'title' => '图片',                'original' => $file_mes['file_path']
            ];            return json($result);
        
        }else{            return json([                'state' => '文件上传失败'
            ]);
        }

        
    }


请发表您的评论
请关注微信公众号
微信二维码
不容错过
Powered By 蚁人博客