### 前端样式
### 前段代码
<form class="layui-form" action="{:url()}" method="post" id="editForm">
<div class="layui-form-item">
<label class="layui-form-label">团队名字</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-team_name" name="team_name" lay-verify="required" autocomplete="off" placeholder="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">团队星级</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-start" name="start" lay-verify="required" autocomplete="off" placeholder="请写入在0.0~5.0之间的数字">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">团队电话</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-phone" name="phone" lay-verify="required" autocomplete="off" placeholder="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">团队标签</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-team_mark" name="team_mark" lay-verify="required" autocomplete="off" placeholder="请写入团队口号或标签">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">团队案例</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-case" name="case" lay-verify="required" autocomplete="off" placeholder="请写入过往案例">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-sort" name="sort" autocomplete="off" placeholder="选填内容">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">价格(元/天)</label>
<div class="layui-input-inline">
<input type="text" class="layui-input field-price" name="price" lay-verify="required" autocomplete="off" placeholder="团队价格">
</div>
</div>
<div class='layui-container' style='margin-top:15px'>
<label class="layui-form-label">图片</label>
<div class="layui-input-inline">
<input type="text" style="display:none" class="layui-input field-img" name="img" lay-verify="required" autocomplete="off" placeholder="" id="img">
</div>
<button type="button" class="layui-btn" id="test2">
<i class="layui-icon"></i>选择图片
</button>
<div class="layui-upload-list">
{foreach name="src" id="r" key="k"}
<img src="{$r}" title="双击删除该图片" style="width:80px;height:auto;" class="rem" data="{$k}">
{/foreach}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">团队介绍</label>
<div class="layui-input-inline">
<textarea id="content" name="content" autocomplete="off" lay-verify="content" placeholder="请输入内容" class="layui-textarea fly-editor" style="height: 100px;"></textarea>
</textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<input type="radio" class="field-iframe" name="status" value="1" title="启用" checked>
<input type="radio" class="field-iframe" name="status" value="0" title="禁用">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
{:token()}
<input type="hidden" class="field-id" name="id">
</div>
</div>
<div class="pop-bottom-bar">
<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true, refresh: true}">提交保存</button>
<a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
</div>
</form>
{include file="block/layui" /}
### js部分
~~~
<script >
var formData = {:json_encode($formData)};
layui.use(['form', 'func','upload','layer','layedit'], function() {
var $ = layui.jquery, form = layui.form;
layui.func.assign(formData)
$("#content").html(formData.intro);
var img = $('#img').val();
var str = img.split(',');//修改时将数据库中传过来的值分割成数组
var imgs = '';//新添加图片的上传地址
src = [];
var i = -1;
var strs= new Array();
var upload = layui.upload, layer = layui.layer, $ = layui.jquery;
var uploadInst = upload.render({
elem: '#test2', //绑定元素
// accept: 'file', //允许上传的文件类型
acceptMime: 'image/*',
multiple: true, //允许多文件上传
auto: true, //选完文件后不要自动上传
// bindAction: '#upd', //指定一个按钮触发上传
url: "{:url('upload')}", //上传接口
// acceptMime: 'image/*',
before: function(obj){
// var files = obj.pushFile(); //将每次选择的文件追加到文件队列
obj.preview(function (index, file, result) {
i++;
$(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" data='+i+' style="width:80px;height:auto;">')
$('#remove_' + index).bind('dblclick', function () {
//双击删除指定预上传图片
delete file[index];//删除指定图片
$(this).remove();
var j = $(this).attr("data")//获取当前点击img标签是第几个
delete src[j]
imgs = src.toString().split(",").filter(d=>d).toString()+','
var imgsrc = img + imgs;
$('#img').val(imgsrc);
})
})
},
done: function(res){
src.push(res.data.file);
imgs = src.toString().split(",").filter(d=>d).toString()+','
var imgsrc = img + imgs;
//上传完毕回调
$('#img').val(imgsrc);
},
error: function(){
//请求异常回调
}
});
$('.rem').bind('dblclick', function () {
var da = $(this).attr("data")
$(this).remove();
delete str[da]
img = str.toString().split(",").filter(d=>d).toString()+','
var imgsrc = img + imgs;
$('#img').val(imgsrc);
})
var layedit , index;
var $ = layui.jquery, form = layui.form;
layedit = layui.layedit;
layedit.set({
uploadImage: {
url: "{:url('upl')}" //接口url
,type: 'post' //默认post
}
});
index = layedit.build('content',{tool: ['strong', 'italic','underline','del','|','left','center','right','|','link','unlink','face','image','|','code']}); //建立编辑器
form.verify({
content: function(value) {
return layedit.sync(index);
}
});
});
</script>
<script>
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('content'); //建立编辑器
});
</script>
~~~
### 后台代码
public function addGoods()
{
$src = $data = [];
if ($this->request->isPost()) {
$data = $this->request->post();
// 验证
$result = $this->validate($data, 'SystemTeam');
$data['img'] = ltrim($data['img'],",");
if($result !== true) {
return $this->error($result);
}
$data['intro'] = $data['content'];
if (!TeamModel::create($data)) {
return $this->error('添加失败');
}
return $this->success('添加成功');
}
//$this->assign('cat_list', CatModel::where('status', 'eq', 0)->order('id asc')->column('id,cat'));
$this->assign('src', $src);
return $this->fetch('userform');
}
public function delUser()
{
parent::del();
}
/**
* 添加分类
* @return mixed
*/
public function editGoods($id = 0)
{
if ($this->request->isPost()) {
$data = $this->request->post();
// 验证
$data['intro'] = $data['content'];
$data['img'] = ltrim($data['img'],",");
if (!TeamModel::update($data)) {
return $this->error('修改失败');
}
return $this->success('修改成功');
}
$row = TeamModel::where('id', '=', $id)->find()->toArray();
$src = explode(',',$row['img']);
$src =array_filter($src);
$this->assign('formData', $row);
$this->assign('src', $src);
//$this->assign('cat_list', CatModel::where('status', 'eq', 0)->order('id asc')->column('id,cat'));
return $this->fetch('userform');
}
/**
* 获取年级
* @return mixed
*/
//上传图片
public function upl(){
$file = request()->file('file');
if($file){
$info = $file->move('./uploads');
if($info){
$result['code'] = 0; //为了照顾到layui富文本编辑器的小脾气 所以此处必须要用0表示成功
$result['msg'] = '上传成功';
$result['data']['src'] = '/uploads/'.str_replace('\\', '/', $info->getSaveName());
$result['data']['title'] = '';
echo json_encode($result);exit();
}else{
$result['code'] = 2;
$result['msg'] = '上传失败';
$result['data']['src'] = '';
$result['data']['title'] = '';
echo json_encode($result);exit();
}
}else{
return false;
}
}
双击删除图片
下面是富文本编辑器
