142 lines
5.5 KiB
PHP
142 lines
5.5 KiB
PHP
<?php require_once __DIR__ . '/auth.php'; require_login(); ?>
|
||
<!doctype html>
|
||
<html lang="zh-CN" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>文档编辑器</title>
|
||
<link rel="stylesheet" href="assets/style.css" />
|
||
<!-- wangEditor v5 CDN -->
|
||
<link rel="stylesheet" href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h1>目录</h1>
|
||
<div class="actions">
|
||
<button id="btn-new" class="btn primary">新建</button>
|
||
<button id="btn-delete" class="btn danger" disabled>删除</button>
|
||
<a class="btn" href="logout.php">退出</a>
|
||
</div>
|
||
</div>
|
||
<ul id="doc-list" class="doc-list"></ul>
|
||
</aside>
|
||
<main class="editor">
|
||
<div class="toolbar">
|
||
<input id="title-input" class="title-input" type="text" placeholder="请输入标题" />
|
||
<div id="we-toolbar" class="we-toolbar"></div>
|
||
<div class="toolbar-buttons">
|
||
<button id="btn-save" class="btn primary" disabled>保存</button>
|
||
<button id="btn-print" class="btn">打印</button>
|
||
<button id="btn-share" class="btn">分享</button>
|
||
<button id="btn-share-revoke" class="btn danger">取消分享</button>
|
||
</div>
|
||
</div>
|
||
<div id="we-editor" class="editor-area"></div>
|
||
<div class="status" id="status"></div>
|
||
</main>
|
||
</div>
|
||
<!-- 分享弹窗容器（通过JS填充）-->
|
||
<div id="share-modal" class="modal-overlay" aria-hidden="true">
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="share-title">
|
||
<h3 id="share-title">生成分享链接</h3>
|
||
<div class="options">
|
||
<button class="btn" data-mode="permanent">永久有效</button>
|
||
<button class="btn" data-mode="24h">24小时有效</button>
|
||
<button class="btn" data-mode="one_time">一次性</button>
|
||
</div>
|
||
<div class="link-box" style="display:none;">
|
||
<input type="text" id="share-link" readonly />
|
||
<button class="btn" id="btn-copy-link">复制</button>
|
||
</div>
|
||
<div class="footer">
|
||
<button class="btn" id="btn-close-share">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="share-toast" class="toast"></div>
|
||
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
|
||
<script src="assets/app.js"></script>
|
||
<script>
|
||
/**
|
||
* 打印当前文档内容
|
||
* 使用简单可靠的方法，在当前页面中创建打印内容并调用浏览器打印功能
|
||
*/
|
||
const printBtn = $('#btn-print');
|
||
if (printBtn) printBtn.onclick = printDoc;
|
||
function printDoc() {
|
||
try {
|
||
// 获取文档标题和内容
|
||
var title = document.getElementById('title-input').value.trim() || '未命名文档';
|
||
var content = '';
|
||
|
||
// 获取编辑器内容
|
||
if (weEditor && typeof weEditor.getHtml === 'function') {
|
||
content = weEditor.getHtml();
|
||
} else {
|
||
var editorElement = document.getElementById('we-editor');
|
||
if (editorElement) {
|
||
content = editorElement.innerHTML;
|
||
}
|
||
}
|
||
|
||
// 创建打印内容容器
|
||
var printContainer = document.createElement('div');
|
||
printContainer.id = 'print-container';
|
||
printContainer.style.position = 'absolute';
|
||
printContainer.style.left = '-9999px';
|
||
printContainer.style.width = '800px'; // 设置合适的打印宽度
|
||
|
||
// 设置打印内容
|
||
printContainer.innerHTML = '<h1 style="text-align:center; font-family:Arial, sans-serif;">' +
|
||
title +
|
||
'</h1><div style="font-family:Arial, sans-serif; line-height:1.6;">' +
|
||
content +
|
||
'</div>';
|
||
|
||
// 添加到页面
|
||
document.body.appendChild(printContainer);
|
||
|
||
// 创建打印样式
|
||
var printStyle = document.createElement('style');
|
||
printStyle.media = 'print';
|
||
printStyle.innerHTML =
|
||
'#print-container { position: static !important; width: 100% !important; } ' +
|
||
'body > *:not(#print-container) { display: none !important; } ' +
|
||
'body { margin: 2cm; }';
|
||
document.head.appendChild(printStyle);
|
||
|
||
// 保存原始样式引用，以便稍后移除
|
||
var originalPrintStyle = printStyle;
|
||
|
||
// 当打印对话框关闭后恢复页面
|
||
window.onafterprint = function() {
|
||
// 移除打印容器和样式
|
||
document.body.removeChild(printContainer);
|
||
document.head.removeChild(originalPrintStyle);
|
||
window.onafterprint = null; // 清除事件处理
|
||
};
|
||
|
||
// 调用浏览器打印功能
|
||
window.print();
|
||
} catch (e) {
|
||
// 打印错误时恢复页面
|
||
try {
|
||
var printContainer = document.getElementById('print-container');
|
||
if (printContainer) document.body.removeChild(printContainer);
|
||
var printStyles = document.querySelectorAll('style[media="print"]');
|
||
printStyles.forEach(function(style) { document.head.removeChild(style); });
|
||
} catch (cleanupError) {
|
||
console.error('清理打印元素时出错:', cleanupError);
|
||
}
|
||
|
||
console.error('打印失败:', e);
|
||
alert('打印失败，请重试');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|