如何利用wangeditor编辑器结合tp5框架进行多图上传
最近写项目,要用到多图上传!当然,之前用起来特别顺手的layui的富文本编辑器就不够用了
因为layui富文本编辑器只能丹徒上传

搜了下,wangeditor可以多图上传!于是就换了!也是因为个人实在不喜欢用baidueditor这种庞大的插件!
如果后期实在是要用,那就在改改项目吧!

本demo是再thinkphp5.0框架下 + wangeditor 使用的
首先wangeditor的文档:https://www.kancloud.cn/wangfupeng/wangeditor3/335782
tp5文档:https://www.kancloud.cn/manual/thinkphp5/155159

下面是demo
前台html模板

<div id="editor">

</div>

<blockquote>
使用事项:首次添加直播内容,请务必填写SEO下的相关内容,便于收录!
后续新增直播内容时可以不用再次添加!
</blockquote>
</div>
<script>
var E = window.wangEditor;
var editor = new E('#editor');
// 或者 var editor = new E( document.getElementById('editor') )
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// editor.customConfig.uploadFileName = 'file';
editor.customConfig.uploadImgServer = "{:url('upload/wangeditor')}" ; // 上传图片到服务器
editor.create();

</script>

只是吧相应的提出来了,如果你的wangeditor没有上传本地图片的功能,可以参考上述js配置

后台php代码
/**
* wangeditor编辑器上传图片,可多图上传
* 返回格式
*
* {
// errno 即错误代码,0 表示没有错误。
// 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,

// data 是一个数组,返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}
*/
public function wangeditor()
{
$files = request()->file();
$imags = [];
$errors = [];
foreach($files as $file){
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
//echo $info->getExtension();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
//echo $info->getFilename();
$path = 'public/uploads/'.$info->getSaveName();
array_push($imags,$path);
}else{
// 上传失败获取错误信息
//echo $file->getError();
array_push($errors,$file->getError());
}
}
if(!$errors){
$msg['errno'] = 0;
$msg['data'] = $imags;
return json($msg);
}else{
$msg['errno'] = 1;
$msg['data'] = $imags;
$msg['msg'] = "上传出错";
return json($msg);
}
}
大部分人应该可以看懂了吧!!!
我的qq632186662!有什么开发项目可以找我!
  

以上就是皓琦小站要跟大家分享的tp5框架利用wangeditor编辑器进行多图上传,更多相关内容,请继续关注皓琦小站www.hq216.cn。