Vditor Markdown 编辑器演示

功能特性

• ✅ 所见即所得编辑模式
• ✅ 三种视图自由切换
• ✅ HTML 代码块沙箱运行 JS
• ✅ 自动保存草稿到本地存储
• ✅ 导入 / 导出 MD 文件
• ✅ 导出完整 HTML / PDF 文档
• ✅ 预览与源码一键切换
• ✅ 单块全屏预览
• ✅ JS 死循环超时防护
• ✅ 亮色 / 暗黑双模式
• ✅ 专业级文档排版
• ✅ Ctrl+S 手动保存
• ✅ 刷新页面自动恢复草稿

普通代码块

const hello = 'world'
console.log(hello)

行内代码示例：const a = 1

可运行 HTML 代码块

点击按钮可交互

<div style="padding: 20px;">
  <h4 style="margin: 0 0 12px;">计数器演示</h4>
  <p>当前数值：<span id="num" style="font-weight: bold; color: #0969da; font-size: 18px;">0</span></p>
  <button id="addBtn" style="padding: 6px 16px; cursor: pointer;">+1</button>
  <button id="resetBtn" style="padding: 6px 16px; cursor: pointer; margin-left: 8px;">重置</button>
</div>
<script>
  let count = 0
  const num = document.getElementById('num')
  document.getElementById('addBtn').onclick = () => {
    count++
    num.textContent = count
  }
  document.getElementById('resetBtn').onclick = () => {
    count = 0
    num.textContent = 0
  }
</script>

表格示例

本作品采用《CC 协议》，转载必须注明作者和本文链接