83 lines
3.5 KiB
HTML
83 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{TITLE}} · 公众号排版预览</title>
|
|
<style>
|
|
body{margin:0;background:#eef0f2;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;-webkit-text-size-adjust:100%;}
|
|
.gzh-toolbar{position:fixed;top:0;left:0;right:0;height:54px;background:#ffffff;box-shadow:0 1px 10px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:99;}
|
|
.gzh-hint{font-size:13px;color:#6b7280;line-height:1.4;}
|
|
.gzh-hint b{color:#111827;}
|
|
.gzh-copy{background:#059669;color:#fff;border:0;border-radius:9px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(5,150,105,.28);white-space:nowrap;transition:transform .08s,background .15s;}
|
|
.gzh-copy:hover{background:#047857;}
|
|
.gzh-copy:active{transform:translateY(1px);}
|
|
.gzh-toast{position:fixed;top:66px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s;z-index:100;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:88vw;text-align:center;}
|
|
.gzh-toast.show{opacity:1;}
|
|
.gzh-stage{max-width:700px;margin:78px auto 64px;padding:0 8px;}
|
|
@media(max-width:520px){.gzh-hint{max-width:150px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="gzh-toolbar">
|
|
<span class="gzh-hint">👇 下方是排版效果 · 点右侧 <b>复制</b> 直接粘到公众号</span>
|
|
<button class="gzh-copy" id="gzhCopyBtn" onclick="gzhCopy()">📋 复制到公众号</button>
|
|
</div>
|
|
<div class="gzh-toast" id="gzhToast"></div>
|
|
<div class="gzh-stage">
|
|
<div id="gzh-content">
|
|
<!--GZH_CONTENT-->
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function gzhShowToast(msg){
|
|
var t=document.getElementById('gzhToast');
|
|
t.textContent=msg;t.classList.add('show');
|
|
clearTimeout(t._timer);
|
|
t._timer=setTimeout(function(){t.classList.remove('show');},2800);
|
|
}
|
|
function gzhCopy(){
|
|
var el=document.getElementById('gzh-content');
|
|
var html=el.innerHTML;
|
|
var text=el.innerText;
|
|
var btn=document.getElementById('gzhCopyBtn');
|
|
var ok=false;
|
|
var handler=null;
|
|
var ta=document.createElement('textarea');
|
|
try{
|
|
// Write the original HTML directly to avoid browser range serialization
|
|
// injecting values such as text-align:start into the copied markup.
|
|
handler=function(e){
|
|
if(!e.clipboardData)return;
|
|
e.clipboardData.setData('text/html',html);
|
|
e.clipboardData.setData('text/plain',text);
|
|
e.preventDefault();
|
|
};
|
|
document.addEventListener('copy',handler,{once:true});
|
|
ta.value=text;
|
|
ta.setAttribute('readonly','');
|
|
ta.style.position='fixed';
|
|
ta.style.left='-9999px';
|
|
ta.style.top='0';
|
|
document.body.appendChild(ta);
|
|
ta.focus();
|
|
ta.select();
|
|
ok=document.execCommand('copy');
|
|
}catch(e){
|
|
ok=false;
|
|
}finally{
|
|
if(ta.parentNode)ta.parentNode.removeChild(ta);
|
|
if(handler)document.removeEventListener('copy',handler);
|
|
}
|
|
if(ok){
|
|
gzhShowToast('✅ 已复制！去公众号编辑器按 Ctrl/⌘+V 粘贴即可');
|
|
var old=btn.textContent;btn.textContent='✅ 已复制';
|
|
setTimeout(function(){btn.textContent=old;},2200);
|
|
}else{
|
|
gzhShowToast('⚠ 浏览器阻止复制，请换 Edge/Chrome 后重试');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|