编辑器地址: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": "图片名称" //可选
}
}相关推荐
- 快速给WordPress安装全站静态缓存插件教程 03-25
- thinkphp5 集成 layui 富文本编辑器-多图片测试 12-21
- 小二胡工作室测试视频教程(三) 03-25
- 站长平台有哪些?SEO必知7大搜索引擎站长平台 03-26
- 简易万年历php代码 03-25
- 快速给WordPress安装全站静态缓存插件教程 03-26
- 小二胡工作室测试视频教程(十) 03-25
- 小二胡工作室测试视频教程(九) 03-28
- 小二胡工作室测试视频教程(六) 03-25
- 小二胡工作室测试视频教程(五) 03-25
- 最新文章
- 热文排行
- 最多评论
- 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整站
最新评论
-
11-28
游客 阿斯顿撒旦 -
06-20
游客 dzgdsgf 评论于:小二胡工作室测试视频教程(四)
-
07-31
游客 123 -
04-10
创始人 测试评论哦!


