mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-03-04 00:24:29 +08:00
240 lines
7.5 KiB
HTML
240 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{$post.title}</title>
|
|
<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">
|
|
<script src="/static/lib/prismjs/prism.js"></script>
|
|
<script src="/static/lib/html2canvas/html2canvas.js"></script>
|
|
<style>
|
|
.article-body {
|
|
padding: 15px;
|
|
max-width: 715px;
|
|
}
|
|
|
|
.article-body>* {
|
|
margin: 10px 0
|
|
}
|
|
|
|
.article-body img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.options-box {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 20%;
|
|
margin: 15px;
|
|
padding: 15px;
|
|
border-radius: 5;
|
|
border: 1px solid #e8e8e8;
|
|
background: #fff;
|
|
|
|
}
|
|
|
|
.options-box>a,
|
|
.options-box>div {
|
|
display: block;
|
|
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 {
|
|
background-color: #e8e8e8;
|
|
color: #333;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="article-body" id="article-body">
|
|
<h1 id="post-title">{$post.title}</h1>
|
|
<div id="post-desc">
|
|
{$post.desc}
|
|
</div>
|
|
<article id="post-content" class="ul-content">
|
|
{notempty name='$post->getData("poster")'}
|
|
<div id="post-title-img">
|
|
<img src="{$post.poster}" alt="">
|
|
</div>
|
|
{/notempty}
|
|
{$post->content_html|raw}
|
|
|
|
{:\\app\\common\\tools\\PostBlock::copyright($post)}
|
|
</article>
|
|
</div>
|
|
<div style="max-width: 715px;">
|
|
<textarea style="width: 100%;" autoHeight="true" id="post-markdown" placeholder="同步markdown内容" autocomplete="off">{$post->content_markdown|raw}</textarea>
|
|
</div>
|
|
|
|
<div class="options-box">
|
|
<a class="copy-option " target="_blank" href="{$post.read_url}">打开原文</a>
|
|
<hr>
|
|
<a class="copy-option " href="#article-body">全选</a>
|
|
<a class="copy-option " href="#post-title">选中标题</a>
|
|
<a class="copy-option " href="#post-desc">选中描述</a>
|
|
<a class="copy-option select-content" href="#post-content">选中内容</a>
|
|
<hr>
|
|
<div class="build-copyright">插入声明</div>
|
|
<div class="remove-copyright">删除声明</div>
|
|
<div class="show-copyright">显示声明</div>
|
|
<hr>
|
|
<div class="build-inlin-style">生成行内样式</div>
|
|
<hr>
|
|
<div class="code2base64">
|
|
代码转临时图片
|
|
</div>
|
|
<div class=" resetcode">
|
|
还原代码
|
|
</div>
|
|
<hr>
|
|
<a class=" select-markdown" href="#post-markdown">选中markdown</a>
|
|
</div>
|
|
|
|
<script>
|
|
$('.code2base64').click(function () {
|
|
$('#post-content').find('pre').each(function (index, elem) {
|
|
if ($(elem).hasClass('tobase64')) {
|
|
return true;
|
|
}
|
|
|
|
$(elem).addClass('tobase64');
|
|
|
|
html2canvas(elem).then(function (canvas) {
|
|
var imgData = canvas.toDataURL("image/jpeg", 1);
|
|
|
|
$.post('{:url("File/tempBase64Save")}', {
|
|
data: imgData
|
|
}, function (result) {
|
|
var imgDom = $('<img />');
|
|
$(imgDom).attr('src', result.data.src);
|
|
|
|
$(imgDom).insertAfter(elem).addClass('pre-to-canvas');
|
|
$(elem).hide();
|
|
});
|
|
|
|
});
|
|
});
|
|
$('.resetcode').click(function () {
|
|
$('#post-content').find('.pre-to-canvas').remove();
|
|
$('#post-content').find('pre').show().each(function (index, elem) {
|
|
$(elem).removeClass('tobase64');
|
|
});
|
|
});
|
|
});
|
|
|
|
$('.copy-option').focusout(function (e) {
|
|
copyContent($(this).attr('href'));
|
|
});
|
|
|
|
$('.select-markdown').click(function () {
|
|
$('#post-markdown').select();
|
|
});
|
|
|
|
$('.build-copyright').click(function () {
|
|
var copyElem = $('.copyright').find('p').last();
|
|
|
|
var html = copyElem.html();
|
|
$('#post-content > p').not('.copyright-inner').each(function (index, elem) {
|
|
|
|
if (index > 0 && index % 8 == 0) {
|
|
|
|
if (!$(elem).next().hasClass('copyright-inner')) {
|
|
$('<blockquote>' + html + '</blockquote>').insertAfter(elem).addClass('copyright-inner');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
$('.remove-copyright').click(function () {
|
|
$('.copyright-inner').remove();
|
|
});
|
|
|
|
$('.show-copyright').click(function () {
|
|
if ($('.article-body').hasClass('show-copyright-inner')) {
|
|
$('.article-body').removeClass('show-copyright-inner');
|
|
} else {
|
|
|
|
$('.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) {
|
|
var content = $(id)[0];
|
|
|
|
// 创建 Range 对象
|
|
const range = new Range();
|
|
|
|
|
|
// Range 起始位置在段落2
|
|
range.selectNode(content);
|
|
|
|
// 获取 selection 对象
|
|
const selection = window.getSelection();
|
|
selection.removeAllRanges();
|
|
// 添加光标选择的范围
|
|
selection.addRange(range);
|
|
}
|
|
|
|
|
|
$(function () {
|
|
$.fn.autoHeight = function () {
|
|
function autoHeight(elem) {
|
|
elem.style.height = 'auto';
|
|
elem.style.height = elem.scrollHeight + 20 + 'px';
|
|
}
|
|
this.each(function () {
|
|
autoHeight(this);
|
|
$(this).on('keyup', function () {
|
|
autoHeight(this);
|
|
});
|
|
});
|
|
};
|
|
$('textarea[autoHeight]').autoHeight();
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |