SchoolPhysicalExamination/application/admin/view/editortext/edit_content.html

398 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>设备管理_add</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="/x_admin/css/font.css">
<link rel="stylesheet" href="/x_admin/css/xadmin.css">
<script type="text/javascript" src="/x_admin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/x_admin/js/xadmin.js"></script>
<script type="text/javascript" src="/x_admin/js/jq.js"></script>
<link href="/rich_text_editor/style.css" rel="stylesheet">
<script src="/rich_text_editor/index.js"></script>
<style>
#editorwrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 500px; }
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row" id="app_all">
<form action="" method="post" class="layui-form layui-form-pane">
<div class="layui-form-item">
<label for="title_v" class="layui-form-label">
<span class="x-red"></span>标题描述
</label>
<div class="layui-input-inline">
<input type="text" id="title_v" name="title_v" required="" lay-verify="title_v" autocomplete="off" class="layui-input" value="{$result.title}">
</div>
</div>
<div class="layui-form-item">
<label for="title_v" class="layui-form-label">
<span class="x-red"></span>上传封面
</label>
<div class="layui-input-inline">
<div class="layui-btn" onclick="xadmin.open('图片管理','/admin/pic','80%','80%')">点击选择</div>
</div>
</div>
<div class="layui-form-item">
<label for="title_v" class="layui-form-label">
<span class="x-red"></span>预览
</label>
<div class="layui-input-inline">
<img id="preview_img" style="max-width:500px;box-shadow: 0px 0px 1px;" src="http://tc.pcxbc.com/{$result.cover_image}" alt="">
<input type="hidden" name="banner_img" id="banner_img" lay-verify="banner_img" value=""></input>
</div>
</div>
<div class="layui-form-item layui-form-text" style="max-width: 440px;">
<label class="layui-form-label">
发布板块
</label>
<table class="layui-table layui-input-block">
<tbody>
<tr>
<td>
{if condition="strpos($result.sector, '1') !== false && strpos($result.sector, '2') !== false && strpos($result.sector, '3') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="" title="全选" lay-filter="sector_all">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="" title="全选" lay-filter="sector_all">
{/if}
</td>
<td>
<div class="layui-input-block">
{if condition="strpos($result.sector, '1') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="1" title="推荐" lay-filter="sector_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="1" title="推荐" lay-filter="sector_child">
{/if}
{if condition="strpos($result.sector, '2') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="2" title="公告" lay-filter="sector_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="公告" lay-filter="sector_child">
{/if}
{if condition="strpos($result.sector, '3') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="3" title="圈" lay-filter="sector_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="3" title="圈" lay-filter="sector_child">
{/if}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="layui-form-item layui-form-text" style="max-width: 440px;">
<label class="layui-form-label">
发布类型
</label>
<table class="layui-table layui-input-block">
<tbody>
<tr>
<td>
{if condition="strpos($result.type, '1') !== false && strpos($result.type, '2') !== false && strpos($result.type, '3') !== false && strpos($result.type, '4') !== false && strpos($result.type, '5') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="" title="全选" lay-filter="type_all">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="" title="全选" lay-filter="type_all">
{/if}
</td>
<td>
<div class="layui-input-block">
{if condition="strpos($result.type, '1') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="1" title="身高管理" lay-filter="type_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="1" title="身高管理" lay-filter="type_child">
{/if}
{if condition="strpos($result.type, '2') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="2" title="体重管理" lay-filter="type_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="体重管理" lay-filter="type_child">
{/if}
{if condition="strpos($result.type, '3') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="3" title="肺活训练" lay-filter="type_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="3" title="肺活训练" lay-filter="type_child">
{/if}
{if condition="strpos($result.type, '4') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="4" title="跳绳训练" lay-filter="type_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="4" title="跳绳训练" lay-filter="type_child">
{/if}
{if condition="strpos($result.type, '5') !== false"}
<input name="id[]" lay-skin="primary" type="checkbox" checked value="5" title="中考体测" lay-filter="type_child">
{else /}
<input name="id[]" lay-skin="primary" type="checkbox" value="5" title="中考体测" lay-filter="type_child">
{/if}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="layui-form-item layui-form-text" style="max-width: 90%;">
<label for="desc" class="layui-form-label">
内容编辑
</label>
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
</div>
<div class="layui-form-item">
<!-- <label for="L_repass" class="layui-form-label"></label> -->
<!-- <div class="layui-btn" id="add" lay-filter="add" lay-submit="">增加</div>
<input value="登录" lay-submit lay-filter="add" type="submit" class="layui-btn"> -->
<button class="layui-btn" lay-filter="add" lay-submit="">修改</button>
</div>
</form>
</div>
</div>
<script>
function receiveParamFromIframe(param) {
pic_data = param
if(pic_data.length > 0){
var img = document.getElementById('preview_img');
img.src = pic_data[1]; // 设置图片预览的src属性
img.style.display = 'block'; // 显示图片预览
$('#banner_img').val(pic_data[0])
}
}
var content_str = '{$result.content}';
// var content_str = '';
var html
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: 'Type here...',
onChange(editor) {
html = editor.getHtml()
html = html.replace(/\r?\n|\r/g, '');
// console.log('editor content', html)
// 也可以同步到 <textarea>
},
MENU_CONF: {}
}
editorConfig.MENU_CONF['uploadImage'] = {
server: '/editortext/upload_pic_action',
maxNumberOfFiles: 1,
maxFileSize: 10 * 1024 * 1024, // 10M
onError(file, err, res) {
// console.log(`${file.name} 上传出错`, err, res)
// console.log(file)
// console.log(err.message)
alert(err.message)
},
}
editorConfig.MENU_CONF['uploadVideo'] = {
server: '/editortext/upload_video_action',
maxFileSize: 100 * 1024 * 1024, // 100M
maxNumberOfFiles: 1,
onError(file, err, res) {
// console.log(`${file.name} 上传出错`, err, res)
// console.log(file)
// console.log(err.message)
alert(err.message)
},
}
const editor = createEditor({
selector: '#editor-container',
html: '<p><br></p>',
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
editor.setHtml(content_str)
</script>
<script>
var form
var id = '{$result.id}'
var sector_arr = '{$result.sector}'.split(",")
var type_arr = '{$result.type}'.split(",")
console.log(sector_arr)
var pd = true
layui.use(['form'], function () {
form = layui.form;
form.verify({
title_v: function(value) {
if (value == '') {
return '请先选择添加标题';
}
},
});
//监听提交
form.on('submit(add)',function(data) {
//发异步把数据提交给php
// console.log(html);
// console.log(sector_arr);
add_data()
return false;
});
form.on('checkbox(sector_all)', function(data){
if(data.elem.checked){
$(data.elem).parent().siblings('td').find('input').prop("checked", true);
form.render();
sector_arr = ['1','2','3','4','5'];
}else{
$(data.elem).parent().siblings('td').find('input').prop("checked", false);
form.render();
sector_arr = [];
}
console.log(sector_arr)
});
form.on('checkbox(sector_child)', function(data){
if(data.elem.checked){
$(data.elem).parent().siblings('td').find('input').prop("checked", true);
form.render();
sector_arr.push($(data.elem).val());
}else{
$(data.elem).parent().siblings('td').find('input').prop("checked", false);
form.render();
if (sector_arr.includes($(data.elem).val())) {
// 如果包含,则删除第一个匹配的元素
let index = sector_arr.indexOf($(data.elem).val());
if (index !== -1) {
sector_arr.splice(index, 1);
}
}
}
console.log(sector_arr)
});
form.on('checkbox(type_all)', function(data){
if(data.elem.checked){
$(data.elem).parent().siblings('td').find('input').prop("checked", true);
form.render();
type_arr = ['1','2','3','4','5'];
}else{
$(data.elem).parent().siblings('td').find('input').prop("checked", false);
form.render();
type_arr = [];
}
console.log(type_arr)
});
form.on('checkbox(type_child)', function(data){
if(data.elem.checked){
$(data.elem).parent().siblings('td').find('input').prop("checked", true);
form.render();
type_arr.push($(data.elem).val());
}else{
$(data.elem).parent().siblings('td').find('input').prop("checked", false);
form.render();
if (type_arr.includes($(data.elem).val())) {
// 如果包含,则删除第一个匹配的元素
let index = type_arr.indexOf($(data.elem).val());
if (index !== -1) {
type_arr.splice(index, 1);
}
}
}
console.log(type_arr)
});
});
// 功能性~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function add_data(){
if(pd === false){
return
}
html = html.replace(/['"]/g, '\\$&');
var data = {
'cover_image':$('#banner_img').val(),
'id':id,
'title':$('#title_v').val(),
'sector':sector_arr,
'type':type_arr,
'content':html,
}
// var formdata = new FormData();
// formdata.append('cover_image',$('#upload_file_app')[0].files[0])
// formdata.append('id',id)
// formdata.append('title',$("#title_v").val())
// formdata.append('sector',sector_arr)
// formdata.append('type',type_arr)
// formdata.append('content',html)
// console.log(formdata)
load()
pd = false
$.ajax({
url:"/editortext/edit_content_action", //请求的url地址
dataType: "json", //返回格式为json
async: true,//请求是否异步默认为异步这也是ajax重要特性
data: data, //参数值
type: "POST", //请求方式
success:function(req){
c_load()
pd = true
console.log()
if(req.code == 0){
layer.alert("修改成功", {icon: 6},function() {
//关闭当前frame
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
});
}else{
layer.alert("修改失败"+req.msg, {icon: 6},function() {
//关闭当前frame
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
});
}
//请求成功时处理
console.log(req)
},
error:function(){
//请求出错处理
pd = true
}
});
}
//加载提示开启
function load() {
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
}
// 关闭加载提示
function c_load() {
layer.close(layer.index)
}
</script>
</body>
</html>