初始化版本
This commit is contained in:
LL
141
index.php
Normal file
141
index.php
Normal file
@@ -0,0 +1,141 @@
|
||||
<?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>
|
||||
|
||||
Reference in New Issue
Block a user