有些东西，不会的时候，就是难；会了，也就这样；
没错，一步一个脚印，不懂弄到懂，是一个过程，不是仅有一个结果；如果仅有一个结果，那下次呢？
思考！并不会让我们失去什么，这会带给我们另一种人生！说多了......
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、效果：
提交前：
提交后：
扫描二维码关注公众号，回复：
10431320 查看本文章
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>参考资料：
富文本编辑器文档 - layui.layedit
http://wemedia.ifeng.com/34880971/wemedia.shtml
