DedeBIZ
/
DedeV6
关注 2
点赞 0
派生 0
代码 合并请求 0 版本发布 29 动态
浏览代码

优化富文本插入多图布局，flex布局下兼容问题

tags/6.5.6
叙述、别离 6 天前
父节点
87d9f5e414
当前提交
ac1b6242c4
共有 8 个文件被更改，包括 39 次插入 和 42 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +22
    -17
      src/admin/dialog/select_mimages.php
  2. +1
    -1
      src/admin/templets/ai_model_main.htm
  3. +1
    -1
      src/admin/templets/article_add.htm
  4. +1
    -1
      src/admin/templets/article_edit.htm
  5. +1
    -1
      src/admin/templets/catalog_add.htm
  6. +1
    -1
      src/admin/templets/catalog_add_quick.htm
  7. +1
    -1
      src/admin/templets/catalog_edit.htm
  8. +11
    -19
      src/static/web/css/admin.css

+ 22
- 17
src/admin/dialog/select_mimages.php 查看文件

@@ -16,15 +16,20 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
<link rel="stylesheet" href="/static/web/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/web/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/web/css/admin.css"> <link rel="stylesheet" href="/static/web/css/admin.css">
</head> </head>
<body>
<div id="wrap">
<div id="topbar">
<body class="p-3">
<div class="card shadow-sm mb-3">
<div id="imgs-topbar" class="card-body">
<label><input type="checkbox" name="isWater" id="isWater" <?php if ($photo_markup == '1') echo 'checked';?>> 是否水印</label> <label><input type="checkbox" name="isWater" id="isWater" <?php if ($photo_markup == '1') echo 'checked';?>> 是否水印</label>
<button class="btn btn-success btn-sm addfile">添加图片</button> <button class="btn btn-success btn-sm addfile">添加图片</button>
<button class="btn btn-success btn-sm removeall">清空图片</button> <button class="btn btn-success btn-sm removeall">清空图片</button>
<button class="btn btn-success btn-sm upall">全部上传</button> <button class="btn btn-success btn-sm upall">全部上传</button>
</div> </div>
<ul id="file_list"></ul>
</div>
<div class="card shadow-sm">
<div class="card-header">插入多图</div>
<div class="card-body">
<ul id="imgs-list"></ul>
</div>
</div> </div>
<script> <script>
var axupimgs = {}; var axupimgs = {};
@@ -57,7 +62,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
var upload_base_path = axupimgs.images_upload_base_path; var upload_base_path = axupimgs.images_upload_base_path;
//为列表添加排序 //为列表添加排序
function reSort() { function reSort() {
document.querySelectorAll('#file_list li').forEach((el, i) => {
document.querySelectorAll('#imgs-list li').forEach((el, i) => {
el.setAttribute('data-num', i); el.setAttribute('data-num', i);
}); });
} }
@@ -81,13 +86,13 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
li.innerHTML='<div class="picbox"><img src="'+blobUrl+'"></div><div class="namebox"><span>'+file.name+'</span></div><div class="tools"><a class="remove"></a></div>'; li.innerHTML='<div class="picbox"><img src="'+blobUrl+'"></div><div class="namebox"><span>'+file.name+'</span></div><div class="tools"><a class="remove"></a></div>';
vDom.appendChild(li); vDom.appendChild(li);
} }
document.querySelector('#file_list').appendChild(vDom);
document.querySelector('#imgs-list').appendChild(vDom);
//reSort(); //reSort();
} }
//清空列表 //清空列表
document.querySelector('#topbar .removeall').addEventListener('click', () => {
document.querySelector('#imgs-topbar .removeall').addEventListener('click', () => {
axupimgs.res=[] axupimgs.res=[]
document.querySelectorAll('#file_list li').forEach((el, i) => {
document.querySelectorAll('#imgs-list li').forEach((el, i) => {
el.parentNode.removeChild(el) el.parentNode.removeChild(el)
}); });
}); });
@@ -124,7 +129,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
} }
}); });
//添加文件 //添加文件
document.querySelector('#topbar .addfile').addEventListener('click', () => {
document.querySelector('#imgs-topbar .addfile').addEventListener('click', () => {
var input = document.createElement('input'); var input = document.createElement('input');
input.setAttribute('type', 'file'); input.setAttribute('type', 'file');
input.setAttribute('multiple', 'multiple'); input.setAttribute('multiple', 'multiple');
@@ -141,7 +146,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
file_i = n; file_i = n;
if (len == n) { if (len == n) {
file_i=0; file_i=0;
document.querySelector('#topbar .upall').innerText='全部上传';
document.querySelector('#imgs-topbar .upall').innerText='全部上传';
//返回 //返回
axupimgs.res.forEach((v, k) => { axupimgs.res.forEach((v, k) => {
let addonHTML = `<img src='${v.url}'>`; let addonHTML = `<img src='${v.url}'>`;
@@ -168,26 +173,26 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
} }
axupimgs.res[file_i].url = url; axupimgs.res[file_i].url = url;
filename = url.split('/').pop(); filename = url.split('/').pop();
var li = document.querySelectorAll('#file_list li')[file_i];
var li = document.querySelectorAll('#imgs-list li')[file_i];
li.setAttribute('class','up-over'); li.setAttribute('class','up-over');
li.querySelector('.namebox span').innerText = filename; li.querySelector('.namebox span').innerText = filename;
n++ n++
upAllFiles(n); upAllFiles(n);
},function(err) { },function(err) {
document.querySelector('#topbar .upall').innerText='全部上传';
document.querySelectorAll('#file_list li.up-now').forEach((el,i) => {
document.querySelector('#imgs-topbar .upall').innerText='全部上传';
document.querySelectorAll('#imgs-list li.up-now').forEach((el,i) => {
el.setAttribute('class','up-no'); el.setAttribute('class','up-no');
}); });
alert(err); alert(err);
}); });
} }
} }
document.querySelector('#topbar .upall').addEventListener('click', (e) => {
document.querySelector('#imgs-topbar .upall').addEventListener('click', (e) => {
if (e.target.innerText!='全部上传') { if (e.target.innerText!='全部上传') {
return false; return false;
} }
if (axupimgs.res.length > 0) { if (axupimgs.res.length > 0) {
document.querySelectorAll('#file_list li.up-no').forEach((el, i) => {
document.querySelectorAll('#imgs-list li.up-no').forEach((el, i) => {
el.classList ? el.classList.add('up-now') : el.className+=' up-now'; el.classList ? el.classList.add('up-now') : el.className+=' up-now';
}); });
e.target.innerText='上传中'; e.target.innerText='上传中';
@@ -200,7 +205,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
el.querySelector('.remove').addEventListener('click', (e) => { el.querySelector('.remove').addEventListener('click', (e) => {
var li = e.target.parentNode.parentNode; var li = e.target.parentNode.parentNode;
var n = li.getAttribute('data-num'); var n = li.getAttribute('data-num');
var el = document.querySelectorAll('#file_list li')[n];
var el = document.querySelectorAll('#imgs-list li')[n];
el.parentNode.removeChild(el); el.parentNode.removeChild(el);
axupimgs.res.splice(n, 1); axupimgs.res.splice(n, 1);
}); });
@@ -208,7 +213,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
} }
reSort(); reSort();
}); });
observ_flist.observe(document.querySelector('#file_list'),{childList:true});
observ_flist.observe(document.querySelector('#imgs-list'),{childList:true});
</script> </script>
</body> </body>
</html> </html>

+ 1
- 1
src/admin/templets/ai_model_main.htm 查看文件

@@ -20,7 +20,7 @@
<li class="breadcrumb-item active">模型版本管理</li> <li class="breadcrumb-item active">模型版本管理</li>
</ol> </ol>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">模型版本管理</div>
<div class="card-header">模型版本管理</div>
<div class="card-body"> <div class="card-body">
<form name="form1" method="post" action="ai_model_edit.php"> <form name="form1" method="post" action="ai_model_edit.php">
<input type="hidden" name="dopost" value="delall"> <input type="hidden" name="dopost" value="delall">


+ 1
- 1
src/admin/templets/article_add.htm 查看文件

@@ -26,7 +26,7 @@
<li class="breadcrumb-item active">发布文档</li> <li class="breadcrumb-item active">发布文档</li>
</ol> </ol>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">发布文档<?php if($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-header d-flex justify-content-between align-items-center"><span>发布文档</span><?php if ($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-body"> <div class="card-body">
<form name="form1" action="article_add.php" method="post" enctype="multipart/form-data"> <form name="form1" action="article_add.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="channelid" value="<?php echo $channelid?>"> <input type="hidden" name="channelid" value="<?php echo $channelid?>">


+ 1
- 1
src/admin/templets/article_edit.htm 查看文件

@@ -26,7 +26,7 @@
<li class="breadcrumb-item active">修改文档</li> <li class="breadcrumb-item active">修改文档</li>
</ol> </ol>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">修改<?php echo $arcRow['title'];?>文档<?php if($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-header d-flex justify-content-between align-items-center"><span>修改<?php echo $arcRow['title'];?>文档</span><?php if ($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-body"> <div class="card-body">
<form name="form1" action="article_edit.php" method="post" enctype="multipart/form-data"> <form name="form1" action="article_edit.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="dopost" value="save"> <input type="hidden" name="dopost" value="save">


+ 1
- 1
src/admin/templets/catalog_add.htm 查看文件

@@ -19,7 +19,7 @@
<li class="breadcrumb-item active">添加栏目</li> <li class="breadcrumb-item active">添加栏目</li>
</ol> </ol>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">添加栏目<?php if($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-header d-flex justify-content-between align-items-center"><span>添加栏目</span><?php if ($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-body"> <div class="card-body">
<form name="form1" action="catalog_add.php" method="post"> <form name="form1" action="catalog_add.php" method="post">
<input type="hidden" name="dopost" value="save"> <input type="hidden" name="dopost" value="save">


+ 1
- 1
src/admin/templets/catalog_add_quick.htm 查看文件

@@ -19,7 +19,7 @@
<li class="breadcrumb-item active">批量添加栏目</li> <li class="breadcrumb-item active">批量添加栏目</li>
</ol> </ol>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">批量添加栏目<?php if($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-header d-flex justify-content-between align-items-center"><span>批量添加栏目</span><?php if ($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-body"> <div class="card-body">
<form name="form1" action="catalog_add.php" method="post"> <form name="form1" action="catalog_add.php" method="post">
<input type="hidden" name="dopost" value="savequick"> <input type="hidden" name="dopost" value="savequick">


+ 1
- 1
src/admin/templets/catalog_edit.htm 查看文件

@@ -19,7 +19,7 @@
<li class="breadcrumb-item active">修改栏目</li> <li class="breadcrumb-item active">修改栏目</li>
</ol> </ol>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">修改栏目<?php if($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-header d-flex justify-content-between align-items-center"><span>修改栏目</span><?php if ($cfg_ai_enabled == 'Y'){;?><button type="button" id="btnAI" onclick="showAI();" class="btn btn-success btn-sm">小德AI助手</button><?php };?></div>
<div class="card-body"> <div class="card-body">
<form name="form1" action="catalog_edit.php" method="post"> <form name="form1" action="catalog_edit.php" method="post">
<input type="hidden" name="dopost" value="save"> <input type="hidden" name="dopost" value="save">


+ 11
- 19
src/static/web/css/admin.css 查看文件

@@ -475,30 +475,22 @@ body.menu-show .admin-content {
border-radius:0 var(--b-radius) var(--b-radius) 0; border-radius:0 var(--b-radius) var(--b-radius) 0;
cursor:pointer cursor:pointer
} }
#wrap {
padding:1rem
}
#topbar {
margin-bottom:1rem;
border-bottom:1px solid var(--light);
text-align:right
}
#file_list {
#imgs-list {
display:grid; display:grid;
grid-gap:1rem; grid-gap:1rem;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) grid-template-columns:repeat(auto-fill,minmax(160px,1fr))
} }
#file_list:empty:after {
#imgs-list:empty:after {
content:'支持拖拽图此处片上传' content:'支持拖拽图此处片上传'
} }
#file_list li {
#imgs-list li {
position:relative position:relative
} }
#file_list li .picbox {
#imgs-list li .picbox {
padding-bottom:75%; padding-bottom:75%;
position:relative position:relative
} }
#file_list li .picbox img {
#imgs-list li .picbox img {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;
@@ -506,10 +498,10 @@ body.menu-show .admin-content {
height:100%; height:100%;
object-fit:cover object-fit:cover
} }
#file_list li .namebox {
#imgs-list li .namebox {
padding-top:0.5rem padding-top:0.5rem
} }
#file_list li.up-over .picbox:after {
#imgs-list li.up-over .picbox:after {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;
@@ -519,20 +511,20 @@ body.menu-show .admin-content {
content:'\f058'; content:'\f058';
z-index:1991 z-index:1991
} }
#file_list li .tools {
#imgs-list li .tools {
display:none; display:none;
position:absolute; position:absolute;
bottom:0; bottom:0;
right:0; right:0;
z-index:1992 z-index:1992
} }
#file_list li:hover .tools {
#imgs-list li:hover .tools {
display:block display:block
} }
#file_list li .tools .remove {
#imgs-list li .tools .remove {
cursor:pointer cursor:pointer
} }
#file_list li .tools .remove:after {
#imgs-list li .tools .remove:after {
font-family:'FontAwesome'; font-family:'FontAwesome';
font-size:14px; font-size:14px;
color:var(--danger); color:var(--danger);


撰写 预览
正在加载...
取消
保存