mkm/nk-lihaink-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

编辑器支持，截屏直接粘贴图片上传功能、拖拽图片文件上传功能

Browse Source
This commit is contained in:
hdm 2022-04-24 19:10:08 +08:00
parent ec798a2b2a
commit ab2f2d84b0
4 changed files with 135 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/admin/view/common/mdeditor.html
View File

@ -1,5 +1,6 @@
<link rel="stylesheet" href="{__STATIC__}/mdeditor/css/editormd.min.css?v=1.0.2"> <link rel="stylesheet" href="{__STATIC__}/mdeditor/css/editormd.min.css?v=1.0.2">
<script src="{__STATIC__}/mdeditor/editormd.min.js"></script> <script src="{__STATIC__}/mdeditor/editormd.min.js"></script>
<script src="{__STATIC__}/mdeditor/plugins/paste.upload.img.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var editormdId='[id]'; var editormdId='[id]';
var editormdMarkdown='[markdown]'; var editormdMarkdown='[markdown]';
@ -46,6 +47,9 @@
border : "none", border : "none",
}); });
this.resize(); this.resize();
},
onload : function() {
initPasteDragImg(this); //必须
} }
}); });
</script> </script>

100
app/admin/view/index/main.html
View File

@ -5,7 +5,7 @@
.table-title { .table-title {
font-size: 18px; font-size: 18px;
font-weight: 800; font-weight: 800;
padding: 15px 15px 0; padding: 12px 12px 0;
} }
.panel-num table { .panel-num table {
width: 100%; width: 100%;
@ -56,14 +56,15 @@
.panel-more a { .panel-more a {
color: #0088FF color: #0088FF
} }
.info-td{width:90px; text-align:right; background-color:#f8f8f8; color:#999; padding:5px 3px;}
</style> </style>
{/block} {/block}
<!-- 主体 --> <!-- 主体 -->
{block name="body"} {block name="body"}
<div class="layui-row layui-col-space10"> <div class="layui-row layui-col-space12">
<div class="layui-col-md8"> <div class="layui-col-md8">
<div class="layui-row layui-col-space10"> <div class="layui-row layui-col-space12">
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card panel-num"> <div class="layui-card panel-num">
<table> <table>
@ -93,13 +94,13 @@
</div> </div>
<div class="layui-card"> <div class="layui-card">
<div class="table-title">注册用户</div> <div class="table-title">注册用户</div>
<div style="padding: 15px;"> <div style="padding: 12px;">
<table id="UserList" lay-filter="UserList" class="layui-hide"></table> <table id="UserList" lay-filter="UserList" class="layui-hide"></table>
</div> </div>
</div> </div>
<div class="layui-card"> <div class="layui-card">
<div class="table-title">文章列表</div> <div class="table-title">文章列表</div>
<div style="padding: 15px;"> <div style="padding: 12px;">
<table id="Article" lay-filter="Article" class="layui-hide" style="margin-top:0"></table> <table id="Article" lay-filter="Article" class="layui-hide" style="margin-top:0"></table>
</div> </div>
</div> </div>
@ -119,53 +120,63 @@
<table class="layui-table" lay-skin="" lay-size="sm"> <table class="layui-table" lay-skin="" lay-size="sm">
{if condition="($install == true)"} {if condition="($install == true)"}
<tr> <tr>
<td colspan="2" style="color: #E94335;">提醒：发现app目录下的install文件夹没删除，为了系统的安全,请手动去删除。</td> <td colspan="4" style="color: #E94335; background-color:#f8f8f8">提醒：发现app目录下的install文件夹没删除，为了系统的安全,请手动去删除。</td>
</tr> </tr>
{/if} {/if}
<tr> <tr>
<td><b>服务器系统</b></td> <td class="info-td">服务器系统</td>
<td>{:get_system_info('os')}</td> <td>{:get_system_info('os')}</td>
</tr> <td class="info-td">PHP版本</td>
<tr>
<td><b>PHP版本</b></td>
<td>{:get_system_info('php')}</td> <td>{:get_system_info('php')}</td>
</tr> </tr>
<tr> <tr>
<td><b>勾股CMS版本</b></td> <td class="info-td">上传附件限制</td>
<td>{:CMS_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:20px"
href="https://blog.gougucms.com/home/book/detail/bid/1.html" target="_blank">勾股CMS文档</a></td>
</tr>
<tr>
<td><b>ThinkPHP版本</b></td>
<td>{:TP_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:20px"
href="https://www.kancloud.cn/manual/thinkphp6_0" target="_blank">TP6文档</a></td>
</tr>
<tr>
<td><b>Layui版本</b></td>
<td>{:LAYUI_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:20px"
href="https://www.layui.site/doc/" target="_blank">Layui文档</a></td>
</tr>
<tr>
<td><b>上传附件限制</b></td>
<td>{:get_system_info('upload_max_filesize')}</td> <td>{:get_system_info('upload_max_filesize')}</td>
</tr> <td class="info-td">执行时间限制</td>
<tr>
<td><b>执行时间限制</b></td>
<td>{:get_system_info('max_execution_time')}</td> <td>{:get_system_info('max_execution_time')}</td>
</tr> </tr>
<tr> <tr>
<td><b>BUG反馈</b></td> <td class="info-td">勾股CMS版本</td>
<td><a href="mailto:hdm58@qq.com" target="_blank">hdm58@qq.com</a></td> <td colspan="3">{:CMS_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px"
href="https://blog.gougucms.com/home/book/detail/bid/1.html" target="_blank">勾股CMS文档</a></td>
</tr> </tr>
<tr> <tr>
<td><b>QQ交流群</b></td> <td class="info-td">ThinkPHP版本</td>
<td>搜Q群：24641076，或点击 <a href="https://jq.qq.com/?_wv=1027&k=pxshRv6I" target="_blank" rel="nofollow"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="gougucms交流群" title="gougucms交流群" style="vertical-align:middle"></a></td> <td colspan="3">{:TP_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px" href="https://www.kancloud.cn/manual/thinkphp6_0" target="_blank">TP6文档</a></td>
</tr> </tr>
<tr> <tr>
<td><b>同系列开源软件</b></td> <td class="info-td">Layui版本</td>
<td><a class="layui-badge layui-bg-blue" style="margin-right:20px" href="https://gitee.com/gougucms/blog" target="_blank">勾股BLOG</a><a class="layui-badge layui-bg-blue" style="margin-right:20px" href="https://gitee.com/gougucms/office" target="_blank">勾股OA</a></td> <td colspan="3">{:LAYUI_VERSION}<a class="layui-badge layui-bg-blue" style="margin-left:8px" href="https://www.layui.site/doc/" target="_blank">Layui文档</a></td>
</tr>
<tr>
<td class="info-td">BUG反馈</td>
<td colspan="3"><a href="mailto:hdm58@qq.com" target="_blank">hdm58@qq.com</a></td>
</tr>
<tr>
<td class="info-td">QQ交流群</td>
<td colspan="3">搜Q群：24641076，或点击 <a href="https://jq.qq.com/?_wv=1027&k=pxshRv6I" target="_blank" rel="nofollow"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="gougucms交流群" title="gougucms交流群" style="vertical-align:middle"></a></td>
</tr>
<tr>
<td class="info-td">同系列开源软件</td>
<td colspan="3"><a class="layui-badge layui-bg-blue" style="margin-right:8px" href="https://gitee.com/gougucms/blog" target="_blank">勾股BLOG</a><a class="layui-badge layui-bg-blue" style="margin-right:8px" href="https://gitee.com/gougucms/office" target="_blank">勾股OA</a><a class="layui-badge layui-bg-blue" href="https://gitee.com/gougucms/dev" target="_blank">勾股DEV</a></td>
</tr>
<tr>
<td class="info-td">🍗🍗<br/>给作者加鸡腿<br/>🍗🍗</td>
<td colspan="3">
<img src="https://www.gougucms.com/static/home/images/zfb.png" data-event="pay" style="width:50%; max-width:100%; cursor:pointer;" align=center /><img src="https://www.gougucms.com/static/home/images/wx.png" data-event="pay" style="width:50%; max-width:100%; cursor:pointer;" align=center />
</td>
</tr> </tr>
</table> </table>
<script>
$('body').on('click','[data-event="pay"]',function(){
var src=$(this).attr('src');
layer.open({
type:1,
title:'感谢您给作者加鸡腿🍗🍗',
content:'<img src="'+src+'" style="width:100%" align=center />',
});
})
</script>
</div> </div>
</div> </div>
<div class="layui-card"> <div class="layui-card">
@ -290,9 +301,9 @@
}); });
var ops = { var ops = {
title: { title: {
top: '15px', top: '12px',
text: '今日与昨日访问统计', text: '今日与昨日访问统计',
left: '12px', left: '10px',
textStyle: { textStyle: {
fontSize: '18', fontSize: '18',
color: '#333', color: '#333',
@ -300,9 +311,9 @@
}, },
color: ["#1AAD19", "#1890FF"], color: ["#1AAD19", "#1890FF"],
grid: { grid: {
left: '20px', left: '16px',
right: '30px', right: '30px',
bottom: '15px', bottom: '12px',
top: '60px', top: '60px',
containLabel: true containLabel: true
}, },
@ -320,7 +331,7 @@
}, },
legend: { legend: {
data: ["今日", "昨日"], data: ["今日", "昨日"],
top: '18px', top: '16px',
}, },
xAxis: [{ xAxis: [{
type: "category", type: "category",
@ -377,9 +388,9 @@
let myChart = echarts.init(document.getElementById('chartYear')); let myChart = echarts.init(document.getElementById('chartYear'));
let option = { let option = {
title: { title: {
top: '15px', top: '12px',
text: '近一年访问统计', text: '近一年访问统计',
left: '12px', left: '10px',
textStyle: { textStyle: {
fontSize: '18', fontSize: '18',
color: '#333', color: '#333',
@ -402,7 +413,7 @@
}, },
calendar: { calendar: {
top: 75, top: 75,
left: 52, left: 50,
right: 20, right: 20,
range: getRange(), range: getRange(),
cellSize: ['auto', 21], cellSize: ['auto', 21],
@ -495,9 +506,6 @@
} }
return dateArray; return dateArray;
} }
} }
</script> </script>

18
public/static/admin/css/common.css
View File

@ -19,9 +19,9 @@
background-color: #c1c1c1; background-color: #c1c1c1;
border-radius: 8px; border-radius: 8px;
} }
body.right-open{overflow-y:clip;}
div.layui-table-main::-webkit-scrollbar{width:15px;height:15px} div.layui-table-main::-webkit-scrollbar{width:12px;height:12px}
div.layui-table-main::-webkit-scrollbar-thumb{min-width:15px;min-height:15px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:2px solid transparent;border-radius:15px} div.layui-table-main::-webkit-scrollbar-thumb{min-width:12px;min-height:12px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:2px solid transparent;border-radius:12px}
div.layui-table-main::-webkit-scrollbar-track{background-color:transparent} div.layui-table-main::-webkit-scrollbar-track{background-color:transparent}
div.layui-table-main::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.04)} div.layui-table-main::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.04)}
div.layui-table-main::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);border:2px solid transparent} div.layui-table-main::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4);border:2px solid transparent}
@ -39,7 +39,8 @@
:-ms-input-placeholder { /* Internet Explorer 10-11 */ :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #aaa; color: #aaa;
} }
.layui-card { box-shadow: 0 1px 3px 0 rgb(5 32 96 / 10%);} .layui-card { box-shadow: 0 1px 3px 0 rgb(5 32 96 / 10%); margin-bottom:12px!important;}
.layui-card-body{padding: 10px 12px!important;}
.layui-table, .layui-table-view{margin:0} .layui-table, .layui-table-view{margin:0}
.layui-table td,.layui-table th{padding:9px 10px;} .layui-table td,.layui-table th{padding:9px 10px;}
.layui-table-cell{padding:0 10px;} .layui-table-cell{padding:0 10px;}
@ -67,8 +68,8 @@
.layui-td-gray4{color:#999; width:150px; text-align:right; background-color:#f8f8f8;} .layui-td-gray4{color:#999; width:150px; text-align:right; background-color:#f8f8f8;}
.layui-td-gray font,.layui-td-gray2 font,.layui-td-gray3 font{color:#FF6347; margin-left: 3px;} .layui-td-gray font,.layui-td-gray2 font,.layui-td-gray3 font{color:#FF6347; margin-left: 3px;}
.main-body{padding:12px;padding-bottom: 0; min-width: 868px;} .main-body{padding:12px;padding-bottom: 0; min-width: 868px;}
.body-content{background-color:#fff; padding:10px 15px;} .body-content{background-color:#fff; padding:8px 12px;}
.body-table{background-color:#fff; margin-bottom:15px} .body-table{background-color:#fff; margin-bottom:12px}
.h3-title{font-size:18px; height:39px; font-weight:800} .h3-title{font-size:18px; height:39px; font-weight:800}
.h3-title2{font-size:18px; height:39px; font-weight:800; padding-top:20px} .h3-title2{font-size:18px; height:39px; font-weight:800; padding-top:20px}
.body-form-btn{padding:10px 0;} .body-form-btn{padding:10px 0;}
@ -82,7 +83,7 @@
.span-color-6{color:#FF33CC;} .span-color-6{color:#FF33CC;}
.span-color-7{color:#6699FF;} .span-color-7{color:#6699FF;}
.span-color-8{color:#CC9933;} .span-color-8{color:#CC9933;}
.layui-tab-title .layui-this:after {width:calc(100% - 35px );left:15px; min-width:65px;} .layui-tab-title .layui-this:after {width:calc(100% - 35px );left:12px; min-width:65px;}
@keyframes layui-rl{ @keyframes layui-rl{
from{transform:translateX(0px);}to{transform:translateX(-100%);} from{transform:translateX(0px);}to{transform:translateX(-100%);}
@ -108,7 +109,8 @@
.layui-anim-rl.layui-layer-iframe{ .layui-anim-rl.layui-layer-iframe{
overflow:initial!important; overflow:initial!important;
} }
.right-popup-close{position: absolute;width:50px;height:44px;line-height:44px;text-align:center; left: -52px;right:0; top: 50px;background-color:#FF5722;color:#fff;border-radius:6px 0 0 6px; cursor:pointer; border:2px solid #fff;} .right-popup-close{position: absolute;width:24px;height:60px; padding:30px 6px; line-height:30px;text-align:center; left: -38px;right:0; top: 20%;background-color:#FF5722;color:#fff;border-radius:6px 0 0 6px; cursor:pointer; border:2px solid #fff; border-right:none; font-weight:600; font-size:14px;}
.right-popup-close:hover{opacity:0.88}
.page-content{background-color:#fff;} .page-content{background-color:#fff;}
.layui-form-select dl{ z-index: 1899; } .layui-form-select dl{ z-index: 1899; }

67
public/static/mdeditor/plugins/paste.upload.img.js Normal file
View File

@ -0,0 +1,67 @@
function initPasteDragImg(Editor){
var doc = document.getElementById(Editor.id)
doc.addEventListener('paste', function (event) {
var items = (event.clipboardData || window.clipboardData).items;
var file = null;
if (items && items.length) {
// 搜索剪切板items
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
} else {
console.log("当前浏览器不支持");
return;
}
if (!file) {
console.log("粘贴内容非图片");
return;
}
uploadImg(file,Editor);
});
var dashboard = document.getElementById(Editor.id)
dashboard.addEventListener("dragover", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("dragenter", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("drop", function (e) {
e.preventDefault()
e.stopPropagation()
var files = this.files || e.dataTransfer.files;
uploadImg(files[0],Editor);
})
}
function uploadImg(file,Editor){
var formData = new FormData();
var fileName=new Date().getTime()+"."+file.name.split(".").pop();
formData.append('editormd-image-file', file, fileName);
$.ajax({
url: Editor.settings.imageUploadURL,
type: 'post',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function (msg) {
var success=msg['success'];
if(success==1){
var url=msg["url"];
if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
Editor.insertValue("![图片alt]("+msg["url"]+" ''图片title'')");
}else{
Editor.insertValue("[下载附件]("+msg["url"]+")");
}
}else{
console.log(msg);
alert("上传失败");
}
}
});
}