修改导出面板

This commit is contained in:
2023-10-19 00:21:39 +08:00
parent e616dba737
commit aed08bc7a1
2 changed files with 86 additions and 38 deletions

View File

@@ -102,7 +102,7 @@ class Common extends BaseController
$cache_key = 'user_uid_' . $uid; $cache_key = 'user_uid_' . $uid;
$user_info = Cache::get($cache_key); $user_info = Cache::get($cache_key);
if (is_null($user_info)) { if (empty($user_info)) {
// 实例化客户端,传入相关参数 // 实例化客户端,传入相关参数
$user_hub_client = new Client([ $user_hub_client = new Client([
'key' => get_system_config('user_hub_key'), 'key' => get_system_config('user_hub_key'),

View File

@@ -6,10 +6,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$post.title}</title> <title>{$post.title}</title>
{include file="common/_require"} <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
<script src="/static/lib/jquery/jquery.cookie.js"></script>
<script src="/static/lib/layui/layui.js"></script>
<script src="/static/js/common.js"></script>
<link rel="stylesheet" href="/static/lib/prismjs/prism.css"> <link rel="stylesheet" href="/static/lib/prismjs/prism.css">
<script src="/static/lib/prismjs/prism.js"></script> <script src="/static/lib/prismjs/prism.js"></script>
<link rel="stylesheet" href="/static/css/index.articles.css">
<script src="/static/lib/html2canvas/html2canvas.js"></script> <script src="/static/lib/html2canvas/html2canvas.js"></script>
<style> <style>
.article-body { .article-body {
@@ -21,6 +23,10 @@
margin: 10px 0 margin: 10px 0
} }
.article-body img {
max-width: 100%;
}
.options-box { .options-box {
position: fixed; position: fixed;
right: 0; right: 0;
@@ -33,9 +39,16 @@
} }
.options-box>* { .options-box>a,
.options-box>div {
display: block; display: block;
margin-bottom: 15px; margin-bottom: 5px;
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
text-align: center;
text-decoration: none;
} }
.article-body.show-copyright-inner .copyright-inner { .article-body.show-copyright-inner .copyright-inner {
@@ -64,25 +77,31 @@
</article> </article>
</div> </div>
<div style="max-width: 715px;"> <div style="max-width: 715px;">
<textarea class="layui-textarea" autoHeight="true" id="post-markdown" placeholder="同步markdown内容" autocomplete="off">{$post->content_markdown|raw}</textarea> <textarea style="width: 100%;" autoHeight="true" id="post-markdown" placeholder="同步markdown内容" autocomplete="off">{$post->content_markdown|raw}</textarea>
</div> </div>
<div class="options-box layui-btn-container"> <div class="options-box">
<a class="copy-option layui-btn layui-btn-sm" target="_blank" href="{$post.read_url}">打开原文</a> <a class="copy-option " target="_blank" href="{$post.read_url}">打开原文</a>
<a class="copy-option layui-btn layui-btn-sm" href="#article-body">全选</a> <hr>
<a class="copy-option layui-btn layui-btn-sm" href="#post-title">中标题</a> <a class="copy-option " href="#article-body"></a>
<a class="copy-option layui-btn layui-btn-sm" href="#post-desc">选中描述</a> <a class="copy-option " href="#post-title">选中标题</a>
<a class="copy-option layui-btn layui-btn-sm select-content" href="#post-content">选中内容</a> <a class="copy-option " href="#post-desc">选中描述</a>
<div class=" layui-btn layui-btn-sm build-copyright">插入声明</div> <a class="copy-option select-content" href="#post-content">选中内容</a>
<div class=" layui-btn layui-btn-sm remove-copyright">删除声明</div> <hr>
<div class=" layui-btn layui-btn-sm show-copyright">显示声明</div> <div class="build-copyright">插入声明</div>
<div class="layui-btn layui-btn-sm code2base64"> <div class="remove-copyright">删除声明</div>
<div class="show-copyright">显示声明</div>
<hr>
<div class="build-inlin-style">生成行内样式</div>
<hr>
<div class="code2base64">
代码转临时图片 代码转临时图片
</div> </div>
<div class="layui-btn layui-btn-sm resetcode"> <div class=" resetcode">
还原代码 还原代码
</div> </div>
<a class=" layui-btn layui-btn-sm select-markdown" href="#post-markdown">选中markdown</a> <hr>
<a class=" select-markdown" href="#post-markdown">选中markdown</a>
</div> </div>
<script> <script>
@@ -103,27 +122,27 @@
var imgDom = $('<img />'); var imgDom = $('<img />');
$(imgDom).attr('src', result.data.src); $(imgDom).attr('src', result.data.src);
$(imgDom).insertAfter(elem).addClass('pre-to-canvas') $(imgDom).insertAfter(elem).addClass('pre-to-canvas');
$(elem).hide(); $(elem).hide();
}) });
}); });
}) });
$('.resetcode').click(function () { $('.resetcode').click(function () {
$('#post-content').find('.pre-to-canvas').remove(); $('#post-content').find('.pre-to-canvas').remove();
$('#post-content').find('pre').show().each(function (index, elem) { $('#post-content').find('pre').show().each(function (index, elem) {
$(elem).removeClass('tobase64') $(elem).removeClass('tobase64');
}) });
}) });
}) });
$('.copy-option').focusout(function (e) { $('.copy-option').focusout(function (e) {
copyContent($(this).attr('href')) copyContent($(this).attr('href'));
}) });
$('.select-markdown').click(function () { $('.select-markdown').click(function () {
$('#post-markdown').select() $('#post-markdown').select();
}) });
$('.build-copyright').click(function () { $('.build-copyright').click(function () {
var copyElem = $('.copyright').find('p').last(); var copyElem = $('.copyright').find('p').last();
@@ -134,24 +153,53 @@
if (index > 0 && index % 8 == 0) { if (index > 0 && index % 8 == 0) {
if (!$(elem).next().hasClass('copyright-inner')) { if (!$(elem).next().hasClass('copyright-inner')) {
$('<blockquote>' + html + '</blockquote>').insertAfter(elem).addClass('copyright-inner') $('<blockquote>' + html + '</blockquote>').insertAfter(elem).addClass('copyright-inner');
} }
} }
}) });
}) });
$('.remove-copyright').click(function () { $('.remove-copyright').click(function () {
$('.copyright-inner').remove(); $('.copyright-inner').remove();
}) });
$('.show-copyright').click(function () { $('.show-copyright').click(function () {
if ($('.article-body').hasClass('show-copyright-inner')) { if ($('.article-body').hasClass('show-copyright-inner')) {
$('.article-body').removeClass('show-copyright-inner') $('.article-body').removeClass('show-copyright-inner');
} else { } else {
$('.article-body').addClass('show-copyright-inner') $('.article-body').addClass('show-copyright-inner');
} }
}) });
$('.build-inlin-style').click(function () {
$('#post-content').find('p').each(function (index, elem) {
$(elem).css('margin-bottom', '18px');
});
$('#post-content').find('h1,h2,h3,h4,h5,h6').each(function (index, elem) {
var headLevel = $(elem).prop('tagName').toLowerCase().replace('h', '');
var cssMap = {
1: 24,
2: 22,
3: 20,
};
$(elem).css('font-size', cssMap[headLevel] + 'px');
$(elem).css('font-weight', 'bold');
$(elem).css('margin-top', '18px');
$(elem).css('margin-bottom', '8px');
});
// ul,ol
$('#post-content').find('ul,ol').each(function (index, elem) {
$(elem).css('margin-bottom', '18px');
});
});
function copyContent(id) { function copyContent(id) {
var content = $(id)[0]; var content = $(id)[0];
@@ -165,7 +213,7 @@
// 获取 selection 对象 // 获取 selection 对象
const selection = window.getSelection(); const selection = window.getSelection();
selection.removeAllRanges() selection.removeAllRanges();
// 添加光标选择的范围 // 添加光标选择的范围
selection.addRange(range); selection.addRange(range);
} }
@@ -183,7 +231,7 @@
autoHeight(this); autoHeight(this);
}); });
}); });
} };
$('textarea[autoHeight]').autoHeight(); $('textarea[autoHeight]').autoHeight();
}) })
</script> </script>