QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

layui

layui中富文本编辑器图片上传(layedit中的uploadImage)

 admin  2017-09-14 09:39:15
layui中引入富文本编辑器,有个图片上传功能,但是官网文档讲述的比较模糊,所以造成刚接触的人比较困惑,查了他们论坛的好多帖子,也有不少人做了出来,但是都不愿意分享出来!研究了一下午 终于研究出来原理,分享出来(我是tp3.2做的)


第一步:首页按照官方文档说明,在后台配置引入文件,这个文档比较详细
  1. layui.use(['form','layedit','element'] 方式引入layedit

创建编辑器:
 

  1. var layedit = layui.layedit; 
  2.    
  3.   layedit.set({ 
  4.         uploadImage: { 
  5.             url: '{:U("System/upload_img")}',//这是我的接口
  6.             type: 'post'
  7.             dataType:'json'
  8.             success: function(data){ 
  9.                console.log(data); 
  10.             } 
  11.         } 
  12.    }); 
  13.   //构建一个默认的编辑器 
  14.   var index = layedit.build('mail_content', { 
  15.        height: 180 //设置编辑器高度 
  16.        } 
  17.   ); 

第二步:如何接收上传的图片
看上面的uploadImage,其实就是一个标准的ajax,只不过只能是post方式,所以我们可以通过success来回调并显示返回的内容!现在最关键的就是我们如何接收图片,并上传他!
官网只给了一句话:

  1. 也就是说LayEdit并不提供服务端的图片接受,但你需要在图片上传成功后对LayEdit返回如下格式的JSON信息: 

论坛发帖好多都是装逼不愿意真正回复,没有办法只能查看layedit.js源码,发现图片上传的 方式是:
 

  1. "file" name="file"

看到这个的时候 你是不是就明白该怎么接收图片了吧!我用的tp3.2是直接引入上传类来实现的

  1. /*处理图片上传*/ 
  2.     $upload = new \Think\Upload();// 实例化上传类   
  3.     $upload->maxSize   =    3145728 ;// 设置附件上传大小   
  4.     $upload->exts      =    array('jpg''gif''png''jpeg');// 设置附件上传类型   
  5.     $upload->savePath  =    '/'// 设置附件上传目录 
  6.     $upload->saveName  =    array('date','YmdHis'); 
  7.     $upload->subName   =    array('date','Ymd'); 
  8.     $file             =   $upload->upload(array($_FILES['file'])); 
  9.          
  10.     $data = __ROOT__."./Uploads".$file[0]['savepath'].$file['0']['savename']; 

但是这还没完,按照官网的要求是必须返回一个标准的json,样式是:

  1.   "code": 0 //0表示成功,其它失败 
  2.   ,"msg""" //提示信息 //一般上传失败后返回 
  3.   ,"data": { 
  4.     "src""图片路径" 
  5.     ,"title""图片名称" //可选 
  6.   } 

刚开始我一直以为是自动返回这种,后来发现需要自己创建数组用来判断这些内容,然后再把数组转换成json返回给编辑器if($data){ //如果上传成功

  1.      if($data){   
  2.             $res['code'] = 0;//0表示成功 
  3.             $res['msg'] = "上传成功"
  4.             $res['data']['src'] = $data;//把图片路径复制 
  5.             $res['data']['title'] ="图片"
  6.         }else
  7.             $res['code'] = 1; 
  8.             $res['msg'] = "上传失败"
  9.         } 
  10. $res = json_encode($res);//把数组转换成json

然后把json返回给编辑器!这样就可以测试成功了!


然而layedit本身功能不是很多,可能样式还不是很完美,希望继续努力!


 

本文《layui中富文本编辑器图片上传(layedit中的uploadImage)》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/frame/layui/718.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序