160 lines
5.6 KiB
HTML
160 lines
5.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>复制功能测试</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.test-content {
|
||
|
|
background: #f8f9fa;
|
||
|
|
border: 1px solid #dee2e6;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 20px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
.copy-btn {
|
||
|
|
background: #28a745;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
.copy-btn:hover {
|
||
|
|
background: #218838;
|
||
|
|
}
|
||
|
|
.result {
|
||
|
|
margin: 10px 0;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
background: #d4edda;
|
||
|
|
color: #155724;
|
||
|
|
border: 1px solid #c3e6cb;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background: #f8d7da;
|
||
|
|
color: #721c24;
|
||
|
|
border: 1px solid #f5c6cb;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>复制功能测试页面</h1>
|
||
|
|
|
||
|
|
<div class="test-content">
|
||
|
|
<h2>测试内容</h2>
|
||
|
|
<p>这是一个测试复制功能的页面。</p>
|
||
|
|
<p><strong>粗体文本</strong> 和 <em>斜体文本</em></p>
|
||
|
|
<ul>
|
||
|
|
<li>列表项 1</li>
|
||
|
|
<li>列表项 2</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="copy-btn" onclick="testCopy()">测试复制功能</button>
|
||
|
|
|
||
|
|
<div id="result"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function testCopy() {
|
||
|
|
const testContent = document.querySelector('.test-content');
|
||
|
|
const resultDiv = document.getElementById('result');
|
||
|
|
|
||
|
|
// 获取Markdown格式的文本
|
||
|
|
const markdownText = getMarkdownText(testContent);
|
||
|
|
|
||
|
|
console.log('生成的Markdown文本:', markdownText);
|
||
|
|
|
||
|
|
// 尝试复制
|
||
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
|
|
navigator.clipboard.writeText(markdownText).then(function() {
|
||
|
|
resultDiv.innerHTML = '<div class="result success">✅ 复制成功！内容已复制到剪贴板。</div>';
|
||
|
|
}).catch(function(err) {
|
||
|
|
console.error('复制失败:', err);
|
||
|
|
resultDiv.innerHTML = '<div class="result error">❌ 复制失败: ' + err.message + '</div>';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
resultDiv.innerHTML = '<div class="result error">❌ 浏览器不支持现代剪贴板API</div>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 将HTML内容转换为Markdown格式
|
||
|
|
function getMarkdownText(element) {
|
||
|
|
if (!element) return '';
|
||
|
|
|
||
|
|
let markdown = '';
|
||
|
|
|
||
|
|
// 遍历所有子节点
|
||
|
|
for (let node of element.childNodes) {
|
||
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
||
|
|
const text = node.textContent;
|
||
|
|
if (text.trim()) {
|
||
|
|
markdown += text;
|
||
|
|
}
|
||
|
|
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||
|
|
const tagName = node.tagName.toLowerCase();
|
||
|
|
const innerText = getMarkdownText(node);
|
||
|
|
|
||
|
|
switch (tagName) {
|
||
|
|
case 'h1':
|
||
|
|
markdown += `# ${innerText.trim()}\n\n`;
|
||
|
|
break;
|
||
|
|
case 'h2':
|
||
|
|
markdown += `## ${innerText.trim()}\n\n`;
|
||
|
|
break;
|
||
|
|
case 'h3':
|
||
|
|
markdown += `### ${innerText.trim()}\n\n`;
|
||
|
|
break;
|
||
|
|
case 'h4':
|
||
|
|
markdown += `#### ${innerText.trim()}\n\n`;
|
||
|
|
break;
|
||
|
|
case 'p':
|
||
|
|
if (innerText.trim()) {
|
||
|
|
markdown += `${innerText.trim()}\n\n`;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'strong':
|
||
|
|
case 'b':
|
||
|
|
markdown += `**${innerText.trim()}**`;
|
||
|
|
break;
|
||
|
|
case 'em':
|
||
|
|
case 'i':
|
||
|
|
markdown += `*${innerText.trim()}*`;
|
||
|
|
break;
|
||
|
|
case 'ul':
|
||
|
|
if (innerText.trim()) {
|
||
|
|
markdown += `${innerText.trim()}\n\n`;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'li':
|
||
|
|
const lines = innerText.trim().split('\n');
|
||
|
|
const firstLine = lines[0];
|
||
|
|
const restLines = lines.slice(1);
|
||
|
|
markdown += `- ${firstLine}`;
|
||
|
|
if (restLines.length > 0) {
|
||
|
|
markdown += '\n' + restLines.map(line => ` ${line}`).join('\n');
|
||
|
|
}
|
||
|
|
markdown += '\n';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
markdown += innerText;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return markdown;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|