WoloEditor

wolai / Notion 风格的块级 Markdown 可视化编辑器，纯 JavaScript、零依赖、单文件（wolo-editor.js），直接 <script> 引入即用。样式由库自动注入（CSS 变量化），开箱支持深浅双主题。

快速开始

<script src="wolo-editor.js"></script>
<div id="editor"></div>
<script>
  const editor = new WoloEditor('#editor', {
    content: '# 你好\n- 列表项',
    theme: 'light',                     // 'light' | 'dark'
    placeholder: '输入文字，输入 / 选择块',
    onChange(md) { console.log(md); },  // 防抖 60ms 实时输出
    onSearchCount(total, idx) {},       // 搜索状态回调（可选）
    // —— 媒体上传接口（二选一）——
    uploadUrl: '/api/upload',           // POST FormData 字段名 file，返回 {"url":"..."} 或纯 url 文本
    uploadHeaders: { Authorization: 'Bearer xxx' },
    uploadFieldName: 'file',
    // 或者完全自定义：upload: async (file) => { ... return url; }
  });
</script>

操作逻辑（对标 wolai）

| 操作 | 行为 | |---|---| | Enter | 拆分当前块；列表/待办/引用内新块继承类型 | | Backspace（块首） | 非正文先降级为正文，再按一次合并进上一块 | | Delete（句尾） | 吸并下一块 | | ↑ / ↓ | 跨块移动光标（按视觉行判断） | | Alt + ↑ / ↓ | 整块上移 / 下移 | | Ctrl/Cmd + Enter | 从列表/待办/引用中退出 | | 输入 / | 块菜单（任意位置可触发、中文过滤、↑↓+Enter、Esc 关闭） | | 多行粘贴 | 自动按 Markdown 解析拆块 | | Tab / Shift+Tab | 列表/待办层级缩进（表格内为前后跳格） | | Backspace（块首） | 优先降列表层级 → 再降块类型 → 最后合并上一块 | | 悬停块左侧 ⠿ | 拖拽排序（带插入位置指示线）；＋ 新增；⋮ 转换/上移/下移/复制/删除 | | Ctrl+Z / Ctrl+Shift+Z | 跨块撤销 / 重做（全文快照式，拖拽排序等结构操作也可撤销） |

Markdown 快捷输入：# /## /### 、- /* 、1. 、[ ] 待办、> 引用、``` 代码块、--- 分割线。

功能特性

🔍 搜索高亮（覆盖层方案）

• editor.search(keyword) → 所有匹配处全量高亮（大小写不敏感），返回匹配数；不修改正文 DOM，安全无副作用
• editor.nextMatch() / editor.prevMatch() → 逐个跳转并滚动到视口中央
• editor.clearSearch() 清除；内容编辑 / 滚动 / 缩放时高亮自动跟随重算
• 配合构造参数 onSearchCount(total, currentIndex) 做自己的计数 UI

👁 已阅标记（自定义语法 ==文字==）

• 选中文字 → 右键 →「标记已阅」→ 文字变浅色淡化
• 撤回：光标落在已阅文字内（无需选中）→ 右键 →「取消已阅」；选区方式同样支持右键撤回
• 导出为自定义 Markdown 语法 ==文字==，导入时自动还原为淡化显示
• CSS 定制淡化颜色：.wolo-mount { --we-faded: 颜色 }（随主题各有默认值）

🌓 深浅双主题

• 库内置样式全部走 CSS 变量，挂载节点带 data-theme="light|dark"
• API：editor.setTheme('dark') / editor.getTheme()
• 定制示例：

.wolo-mount[data-theme="dark"] {
  --we-ink: #d8dce4;      /* 正文 */
  --we-blockbg: #24272e;  /* 代码块底色 */
  --we-accent: #5b8cff;   /* 强调色 */
}

🖼 媒体上传（图片 / 视频）

• 拖拽文件进编辑器或复制粘贴图片/视频即自动上传，插入媒体块（视频内嵌播放器）
• 上传期间显示占位提示，失败显示红色错误行（可通过 Backspace 删除重试）
• 接口约定（未配置时小文件走 dataURL 本地兜底，≤8MB）：
  • uploadUrl: string — 以 POST multipart/form-data 发送，字段名 uploadFieldName（默认 file）
  • 响应兼容：JSON {url} / {data:{url}} / {src}，或纯 URL 文本字符串
  • 自定义实现：upload: async (file) => urlString
• 导出格式：图片 ![alt](url)；视频 <video src="url" controls></video>（导入同样识别）

⌨ 撤销 / 重做

• 全文快照式（150 步栈），跨块生效：文本编辑、块拆分/合并、拖拽排序、层级缩进、已阅标记、表格编辑等全部可撤销
• Ctrl/Cmd+Z 撤销，Ctrl+Shift+Z 或 Ctrl+Y 重做；API：undo() / redo() / canUndo() / canRedo()

⇅ 嵌套列表与多回车换行

• 列表/待办按 Tab 加层级、Shift+Tab 减层级、块首 Backspace 自动降层；导出为标准 2 空格缩进 Markdown，导入自动还原层级
• 连续多个 Enter 产生的空行在导出 Markdown 中原样保留，导入时空行也还原为空段落，往返 1:1

▦ 表格（GitHub 风格）

• 导入 | a | b | + | --- | --- | 语法的表格自动渲染为可编辑表格块
• 单元格可直接点击编辑（Enter 软换行、Tab/Shift+Tab 在单元格间跳转），编辑实时同步到右侧 Markdown 输出
• 导出还原为标准 GitHub 表格语法

支持的块类型

p 正文 · h1/h2/h3 标题 · ul/ol 列表（支持嵌套） · todo 待办 · quote 引用 · code 代码块 · hr 分割线 · table 表格 · 图片/视频媒体

当前限制（v0.3）

• 表格结构编辑（增删行列）暂未提供菜单入口，可通过删除表格块后重新粘贴调整
• 图片宽度自适应容器，暂不支持手动拖拽调宽；暂无图片说明文字编辑
• 搜索匹配基于纯文本定位，能正确高亮横跨粗体/链接等行内格式的关键词
• hr / table 块不参与块内光标合并逻辑，只能整体删除或经手柄拖走