编辑器地址:http://www.layui.com/doc/modules/layedit.html
效果图如下:
1、 去官网:http://www.layui.com/ 下载layui
结构如下:
├─css //css目录 │ └─modules //模块css目录(一般如果模块相对较大,我们会单独提取) │ ├─laydate │ ├─layer │ │ └─default │ └─layim │ └─skin ├─font //字体图标目录 ├─images //图片资源目录(一些表情等) │ └─face └─lay //JS目录 ├─dest //经过合并的完整模块 └─modules //各模块/组件
2、 找到tp5 项目目录: 根目录/public/static/ 把下载的layui文件夹放进去
效果如下图:
3、 html 部分(主要内容如以下代码)
<link rel="stylesheet" href="/static/layui/css/layui.css"> <script src="/static/layui/layui.js"></script> <textarea id="demo" name="content" style="display: none;"></textarea> <script> layui.use('layedit', function(){ var layedit = layui.layedit; //上传图片接口:注意:layedit.set 一定要放在 build前面,否则配置全局接口将无效 layedit.set({ uploadImage: { url: '/admin/Article/lay_img_upload', //接口url type: 'post', //默认post } }); //创建编辑器 layedit.build('demo'),{ width:600, height: 180 //设置编辑器高度 }; //建立编辑器 }); </script>
4、PHP部分代码如下:
$content = input('content');
//控制器头部要引入 use think\Request; //layui编辑器图片上传接口 public function lay_img_upload(){ $file = Request::instance()->file('file'); if(emptyempty($file)){ $result["code"] = "1"; $result["msg"] = "请选择图片"; $result['data']["src"] = ''; }else{ // 移动到框架应用根目录/public/uploads/ 目录下 $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/layui' ); if($info){ $name_path =str_replace('\\',"/",$info->getSaveName()); //成功上传后 获取上传信息 $result["code"] = '0'; $result["msg"] = "上传成功"; $result['data']["src"] = "/uploads/layui/".$name_path; }else{ // 上传失败获取错误信息 $result["code"] = "2"; $result["msg"] = "上传出错"; $result['data']["src"] =''; } } return json_encode($result); }
//layui图片规定返回格式,,依据这个格式,做上面代码的相应返回处理 { "code": 0 //0表示成功,其它失败 ,"msg": "" //提示信息 //一般上传失败后返回 ,"data": { "src": "图片路径" ,"title": "图片名称" //可选 } }
第一套测试
第二天测试
第三天测试
相关推荐
- 百度网盘官方加速 双11大促提前抢:超级会员年卡178元 03-25
- 小二胡工作室测试视频教程(五) 03-25
- 小二胡工作室测试视频教程(九) 03-28
- 禁用谷歌Chrome HTTP自动跳转到HTTPS 03-26
- thinkphp5 集成 layui 富文本编辑器 教程 04-06
- WordPress关闭后台自动检测更新的代码 03-25
- 快速给WordPress安装全站静态缓存插件教程 03-25
- 站长平台有哪些?SEO必知7大搜索引擎站长平台 03-26
- 小二胡工作室测试视频教程(十) 03-25
- 站长平台有哪些?SEO必知7大搜索引擎站长平台 03-24
- 最新文章
- 热文排行
- 最多评论
- 1thinkphp5 集成 layui 富文本编辑器-多图片测试12-21
- 2thinkphp5 集成 layui 富文本编辑器 教程04-06
- 3小二胡工作室测试视频教程(九)03-28
- 4站长平台有哪些?SEO必知7大搜索引擎站长平台03-26
- 5禁用谷歌Chrome HTTP自动跳转到HTTPS03-26
- 6快速给WordPress安装全站静态缓存插件教程03-26
- 7站长平台有哪些?SEO必知7大搜索引擎站长平台03-26
- 8thinkphp5 集成 layui 富文本编辑器 教程03-26
- 9禁用谷歌Chrome HTTP自动跳转到HTTPS03-26
- 标签聚合
- ×1自适应 ×1WP ×1主题 ×1Discuz ×1DZ ×1门户 ×1论坛 ×1WordPress ×1模板 ×1破解版 ×1CMS ×1响应式 ×1付费 ×1源码 ×1起名 ×1周易 ×1电子商务 ×1支付 ×1小说 ×1整站
最新评论
-
游客
阿斯顿撒旦 -
游客
dzgdsgf 评论于:小二胡工作室测试视频教程(四)
-
游客
123 -
创始人
测试评论哦!