📝

Markdown 编辑器

实时预览 · 代码高亮 · 快捷键 · 自动保存

Markdown ✓ 已自动保存

プレビュー ● 同步中

0 字符 0 字 0 行

' + marked.parse(input.value) + ''; filename = 'document.html'; mime = 'text/html'; } const blob = new Blob([content], { type: mime + ';charset=utf-8' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename; a.click(); URL.revokeObjectURL(a.href); } function copyHtml() { const html = marked.parse(input.value); if (navigator.clipboard) { navigator.clipboard.writeText(html).then(() => { showToast('HTMLをコピーしました'); }).catch(() => fallbackCopy(html)); } else { fallbackCopy(html); } } function fallbackCopy(text) { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showToast('HTMLをコピーしました'); } function showToast(msg) { saveTip.textContent = '✓ ' + msg; saveTip.classList.add('show'); setTimeout(() => { saveTip.classList.remove('show'); saveTip.textContent = '✓ 已自动保存'; }, 2000); } function clearAll() { if (input.value && !confirm('すべてのコンテンツをクリアしますか？')) return; input.value = ''; render(); localStorage.removeItem('md-editor-content'); } // ====== 快捷键 ====== input.addEventListener('keydown', function(e) { const ctrl = e.ctrlKey || e.metaKey; if (ctrl && e.key === 'b') { e.preventDefault(); wrapText('**', '**'); } else if (ctrl && e.key === 'i') { e.preventDefault(); wrapText('*', '*'); } else if (ctrl && e.key === 'd') { e.preventDefault(); wrapText('~~', '~~'); } else if (ctrl && e.key === 'k') { e.preventDefault(); insertLink(); } else if (ctrl && e.key === '`') { e.preventDefault(); wrapText('`', '`'); } else if (e.key === 'F11') { e.preventDefault(); toggleFullscreen(); } else if (e.key === 'Tab') { e.preventDefault(); document.execCommand('insertText', false, ' '); } }); // ====== 输入事件 ====== input.addEventListener('input', function() { debouncedRender(); autoSave(); }); // ====== 滚动同步 ====== input.addEventListener('scroll', function() { const ratio = input.scrollTop / (input.scrollHeight - input.clientHeight || 1); preview.scrollTop = ratio * (preview.scrollHeight - preview.clientHeight); }); // ====== 初始化 ====== const saved = localStorage.getItem('md-editor-content'); if (saved) { input.value = saved; } else { input.value = `# 欢迎使用 Markdown 编辑器 **工具岛** 提供功能强大的在线 Markdown 编辑器。 ## 功能特性 - 📝 **实时预览** — 左侧编辑，右侧同步渲染 - 🎨 **代码高亮** — 支持 JS、Python、Go 等多种语言 - 🔧 **工具栏** — 快捷插入标题、加粗、链接、表格等 - ⌨️ **快捷键** — Ctrl+B 粗体 / Ctrl+I 斜体 / Ctrl+K 链接 - 💾 **自动保存** — 内容自动保存到浏览器本地 - 📤 **多种导出** — 支持导出 .md 和 .html 文件 - 📊 **字数统计** — 实时显示字符数、字数、行数 - ⛶ **全屏模式** — F11 进入沉浸式编辑 ## 示例 ### 代码块 \`\`\`javascript function greet(name) { console.log(\`Hello, \${name}!\`); } greet('ツール島'); \`\`\` ### 表格 | 功能 | 快捷键 | 说明 | | --- | --- | --- | | 粗体 | Ctrl+B | **加粗文字** | | 斜体 | Ctrl+I | *倾斜文字* | | 链接 | Ctrl+K | [插入链接]() | | 代码 | Ctrl+\` | \`行内代码\` | ### 任务列表 - [x] 实时预览 - [x] 代码高亮 - [x] 工具栏 - [x] 快捷键支持 - [x] 自动保存 > 💡 **提示**：所有操作均在浏览器本地完成，不会上传任何内容。 --- *开始编辑吧！*`; } render();