<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>校园环境</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/style/edit.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<style>
#editor—wrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 400px; }
</style>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">校园环境列表</li>
<li>校园环境添加</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show"><table class="layui-hide" id="classClass" style="padding:25px;" lay-filter="classClass"></table></div>
<div class="layui-tab-item">
<blockquote class="layui-elem-quote layui-text">
温馨提示： 1. <font style="color:#01aaed;">带有红色”*“的为必填项；</font>
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>校园环境</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">环境标题</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">环境图片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
<div style="width: 95px;">
<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
</div>
</div>
</div>
<input type="hidden" name="img" id="img">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">环境介绍</label>
<div class="layui-input-block">
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="subdata">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/style/edit.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script type="text/html" id="imgshow">
<!-- 这里的 checked 的状态只是演示 -->
<img src="/{{d.log}}">
</script>
<script type="text/html" id="tool">
<!-- 这里的 checked 的状态只是演示 -->
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: '请编辑新闻介绍',
MENU_CONF: {},
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 也可以同步到 <textarea>
}
}
editorConfig.MENU_CONF['uploadImage'] = {
server: '/admin_index/upload', // 上传图片地址
// server: 'http://106.12.198.214:3000/api/upload-img-10s', // 用于测试 timeout
// server: 'http://106.12.198.214:3000/api/upload-img-failed', // 用于测试 failed
// server: 'http://106.12.198.214:3000/api/xxx', // 用于测试 404
timeout: 5 * 1000, // 5s
fieldName: 'file',
meta: { type: 1 },
metaWithUrl: true, // 参数拼接到 url 上
headers: { Accept: 'text/x-json' },
maxFileSize: 10 * 1024 * 1024, // 10M
base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
onBeforeUpload(files) {
console.log('onBeforeUpload', files)
return files // 返回哪些文件可以上传
// return false 会阻止上传
},
onProgress(progress) {
console.log('onProgress', progress)
},
onSuccess(file, res) {
console.log('onSuccess', file, res)
},
onFailed(file, res) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file, err, res) {
alert(err.message)
console.error('onError', file, err, res)
},
// // 用户自定义插入图片
// customInsert(res, insertFn) {
// console.log('customInsert', res)
// const imgInfo = res.data[0] || {}
// const { url, alt, href } = imgInfo
// if (!url) throw new Error(`Image url is empty`)
// // 自己插入图片
// console.log('自己插入图片', url)
// insertFn(url, alt, href)
// },
// // 用户自定义上传图片
// customUpload(file, insertFn) {
// console.log('customUpload', file)
// return new Promise((resolve) => {
// // 插入一张图片，模拟异步
// setTimeout(() => {
// const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
// insertFn(src, '百度 logo', src)
// resolve('ok')
// }, 500)
// })
// },
// // 自定义选择图片（如图床）
// customBrowseAndUpload(insertFn) {
// alert('自定义选择图片，如弹出图床')
// // 插入一张图片，模拟异步
// setTimeout(() => {
// const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
// insertFn(src, '百度 logo', src) // 插入图片
// }, 500)
// },
}
const editor = createEditor({
selector: '#editor-container',
html: '',
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
layui.use(['layedit','table','upload','element','form','layer'], function(){
var layedit = layui.layedit
,table = layui.table
,form = layui.form
,layer = layui.layer
,upload = layui.upload
,element = layui.element
,$ = layui.jquery;
table.render({
elem: '#classClass'
,url: '/admin_new/list'
,toolbar: '#toolbarDemo'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,where: {type: 3}
,page: true
,cols: [[
{field:'id', width:80, title: '序号'}
,{field:'title',width:180, title: '校园环境标题'}
,{templet: '#imgshow',width:180, title: '校园环境图片'}
,{field:'content', title: '校园环境简介',minWidth:'500'}
,{field:'created',width:180, title: '修改时间'}
,{templet: '#tool',width:200, title: '操作'}
]]
});
table.on('tool(classClass)', function(obj){
console.log(obj)
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('确定要删除数据嘛', function(index){
$.post('/admin_index/delete',{tablename:'active',id:data.id},function(obj){
if(obj.status != 1){
return layer.msg(obj.msg);
}else{
//示范一个公告层
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,btn: '返回列表'
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">删除成功</div>'
,yes: function(){
history.go(0)
}
});
}
});
});
}
});
$('.site-demo-layedit').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//监听提交
form.on('submit(subdata)', function(data){
var datas = data.field
datas.content = editor.getHtml();
datas.type = 3;
$.post('/admin_new/save',data.field,function(obj){
if(obj.status != 1){
return layer.msg(obj.msg);
}else{
//示范一个公告层
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,btn: '返回列表'
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">添加成功</div>'
,yes: function(){
history.go(0)
}
});
}
});
return false;
});
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/admin_index/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
element.progress('demo', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 0});
}
,done: function(res){
//如果上传失败
if(res.status != 1){
return layer.msg('上传失败');
}
$('#img').val(res.data); //置空上传失败的状态
//上传成功的一些操作
//……
$('#demoText').html(''); //置空上传失败的状态
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
//进度条
,progress: function(n, elem, e){
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
if(n == 100){
layer.msg('上传完毕', {icon: 1});
}
}
});
});
</script>
</body>
</html>