Files
ulthon_information/view/admin/post/output.html
2025-05-05 10:29:49 +08:00

346 lines
10 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/htmx-v2.0.4/htmx.min.js"></script>
<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: 0;
padding: 15px;
border-radius: 5;
border: 1px solid #e8e8e8;
background: #fff;
overflow: auto;
}
.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;
}
.post-platform-item a,
.post-platform-item a:hover,
.post-platform-item a:visited {
color: #fff;
}
</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>
<hr>
<div class="post-platform-list">
{volist name='list_post_platform' id='vo'}
<div class="post-platform-item">
<div
class="post-platform-label"
style="text-align: left;"
>
<a
href="{$vo.value}"
target="_blank"
>
{$vo.title}
</a>
<a
style="margin-left: 6px;"
href="{$vo.home_url}"
title="{$vo.account}"
target=" _blank"
>
主页
</a>
{empty name='$post.post_platform_data_array[$vo.id]'}
<span style="margin-left: 6px;">文章:</span>
{else /}
<a
href="{$post.post_platform_data_array[$vo.id]}"
target=" _blank"
style="margin-left: 6px;"
>文章:</a>
{/empty}
</div>
<div class="post-platform-label">
<input
type="text"
name="value"
value="{$post.post_platform_data_array[$vo.id]|default=''}"
placeholder="请输入文章链接"
hx-post="{:url('setPostPlatformData')}"
hx-vals="js:{post_id:{$post.id},type:{$vo.id}}"
>
</div>
</div>
<hr>
{/volist}
</div>
</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();
});
layui.use(['element', 'layer', 'util'], function () { });
$('body').on('layerMsg', function (evt) {
layui.layer.msg(evt.originalEvent.detail.title);
})
</script>
</body>
</html>