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' => '文件上传失败' ]); } }