当前位置: 代码迷 >> 综合 >> 富文本下编辑器上传图片 一系列问题
  详细解决方案

富文本下编辑器上传图片 一系列问题

热度:37   发布时间:2023-11-29 11:44:46.0

最近被layer这个简单有方便的前端框架忽然难死,就是编辑器部分上传图片和回显问题!废话不多直接说(不足还望指出,js引入之类不谈 layui.css 和layui.js)
先说下注意下事项和参考文档
官方layer编辑器文档
(注意:这个是1.X版本的 不是2.X版本,也是找了许久,2.X新版没找到入口)
注意事项: 1.严格按照上传返回数据格式(必须json 和必须是二维数组 字段要映射不能自定义)!!!
2. 一定要在build之前引入上传图片接口!!! (其他解析在代码注释中)

HTML & JQ代码

//html简单只是 单纯 设置 必须必须是 textarea 标签
<div class="layui-input-block"><textarea class="layui-textarea layui-hide" name="description" id="description"></textarea>
</div>//这是重点*****//必须引入 其中form和laydate可以不用 项目需求而已
layui.use(['form', 'layedit', 'laydate','upload'], function() {//上边引入多少 下边定义多少var form = layui.form(),$ = layui.jquery,layer = layui.layer,//这个是编辑器重中之重 必须有定义 其他也可以不要layedit = layui.layedit,//这就是上边说的 build 之前引入layedit.set({uploadImage: {url:'/Admin/News/uploadFile/' //图片上传接口url,type: 'post' //默认post}});//创建一个编辑器 build 就算创建好了 其中 description 是html的 id id idvar editIndex = layedit.build('description');//想获取编辑器的文本和图片 括号里 是 上一行定义的参数layedit.getContent(editIndex);
});

看到这你们发现 都 ok 我是死在参数没跟框架中映射上 都是自定义的参数 不识别啊返回也是空 官方文档 上边有链接 我还是截个图吧
注意红色圈圈 这是坑啊
PHP 这边不就是upload上传嘛 我还是写一下吧 自己也长个记性吧

		//必须是file('file') 括号file得有  一开始我自己封装了不能用 $file = request()->file('file');if (empty($file)) {return output(1,200004,'newsinfo'); }$info = $file->validate(['size'=>1567800,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'static\upload');if($info){$filePath = '/static/upload/'.$info->getSaveName();//$getInfo = $info->getInfo();//获取图片的原名称//核心技术 我勒个去 code 必须0 否则失败 然后看上边截图吧!!!$cc  = array('code' =>0 ,'msg'=>'上传成功','data'=>array('src' =>$filePath));echo json_encode($cc);}else{$cc  = array('code' =>1 ,'msg'=>$file->getError(),'data'=>array('src' =>$filePath));// 上传失败获取错误信息echo json_encode($data);}

难受 一天玩他 总算也是解决了!!!!哎