有些东西,不会的时候,就是难;会了,也就这样;
没错,一步一个脚印,不懂弄到懂,是一个过程,不是仅有一个结果;如果仅有一个结果,那下次呢?
思考!并不会让我们失去什么,这会带给我们另一种人生!说多了......
1、html 代码(全)记得引入 JS和CSS 文件 :
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>富文本</title>
<link rel="stylesheet" href="/public/static/layui/css/layui.css">
<script src="/public/static/js/jquery-1.8.3.js"></script>
</head>
<body>
<form class="layui-col-md10 margin-top" method="post" action="bg_get" enctype="multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input class="layui-input" type="text" name="title" placeholder="请输入标题">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">摘要</label>
<div class="layui-input-block">
<input class="layui-input" type="text" name="excerpt" placeholder="请输入摘要">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">正文</label>
<div class="layui-input-block">
<textarea id="editor" name="content" style="display: none;"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" >添加</button>
<a class="layui-btn layui-btn-primary" href="javascript:history.back(-1)">返回</a>
</div>
</div>
</form>
<script src="/public/static/layui/layui.js"></script>
<script>
//layui.use('layedit', function(){});
layui.use('layedit', function(){
var layedit = layui.layedit;
//上传图片接口:注意:layedit.set 一定要放在 build前面,否则配置全局接口将无效
layedit.set({
uploadImage: {
url: '/bg_img_upload', //接口url
type: 'post' //默认post
}
});
//创建编辑器
var index = layedit.build('editor', {
height: 280 //设置编辑器高度
});
//layedit.getContent(index);
$('.layui-btn').click(function(){
layedit.sync(index);
});
});
</script>
</body>
</html>
2、tp5 后台:(这三个方法:页面、获取内容、图片异步上传)
//编辑器 页面
public function layEdit(){
return $this -> fetch();
}
//获取文本内容 打印
public function layGet(){
$da = \request() -> param();
print_r($da);
return '获取数据成功';
}
//layui 编辑器 图片上传接口
public function imgUpload(){
//$obj = new UploadFile();
//$dirName = $this -> dirName();
if(request()->isPost()) {
//$files = $_FILES("file");
$files = Request::instance()-> file("file");
if (empty($files)) {
$result["code"] = "1";
$result["msg"] = "请选择图片";
$result['data']["src"] = '';
} else {
//图片放在路径下:/public/upload/our/
$info = $files->move(ROOT_PATH . 'public' . DS . 'upload/our' );
if ($info) {
$name_path =str_replace('\\',"/",$info->getSaveName());
// $fileName = $obj->upload($files, $dirName);
//成功上传后 获取上传信息
$result["code"] = '0';
$result["msg"] = "上传成功";
$result['data']["src"] = '/public/upload/our/'.$name_path;
} else {
// 上传失败获取错误信息
$result["code"] = "2";
$result["msg"] = "上传出错";
$result['data']["src"] = '';
}
}
return json($result);
}
return false;
}
3、route => 路由配置:
<?php
think\Route::rule([
'bg_edit' => 'lenze/Our/layEdit', //页面显示
'bg_get' => 'lenze/Our/layGet', //内容添加
'bg_img_upload' => 'lenze/Our/imgUpload', //图片上传
]);
action="bg_get" -> 内容接口
url: '/bg_img_upload', -> 图片接口
4、效果:
提交前:
提交后:
5、感想:网上好多文章都是写上传图片的,上传内容的只是简单一过,layui 封装好的,开始的时候不知道怎么下手;记录下来方便你我!
<script>
layui.use('layedit', function(){
//1、图片知道上传了
var layedit = layui.layedit;
//上传图片接口:注意:layedit.set 一定要放在 build前面,否则配置全局接口将无效
layedit.set({
uploadImage: {
url: '/bg_img_upload', //接口url
type: 'post' //默认post
}
});
//创建编辑器
var index = layedit.build('editor', {
height: 280 //设置编辑器高度
});
//2、内容怎么传到后台? 闹得我心慌
$('.layui-btn').click(function(){
layedit.sync(index);
});
})
</script>