panphora/overtype

这是什么？

核心功能

• 01透明 textarea 叠加层，让输入内容与样式化预览保持对齐。
• 02可选工具栏，包含粗体、斜体、代码、链接、标题、列表、任务列表和引用按钮。
• 03支持 Cmd/Ctrl+B、Cmd/Ctrl+K 等快捷键，并支持类似 GitHub 的列表自动续行。
• 04内置 Solar 与 Cave 主题，也支持自定义颜色主题。
• 05可导出干净的 HTML 或渲染后的 HTML，并提供独立的 Markdown 解析器。
• 06可通过 npm 包、CDN 脚本或 Web Component 使用。

适用场景

• 在网页表单或评论框中加入轻量的 Markdown 输入，无需构建步骤。
• 在单文件网页应用中构建笔记或文档编辑器。
• 在需要良好移动端键盘支持的页面中嵌入 Markdown 编辑器。
• 使用独立解析器在服务端将 Markdown 渲染为 HTML。

快速上手

1. 1

   从 npm 安装该包

   npm install overtype
2. 2

   导入 OverType 并在容器元素上创建编辑器

   import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });

标签

常见问题

overtype 是什么？

一个轻量的 JavaScript Markdown 编辑器，通过透明 textarea 叠加在渲染预览上实现所见即所得的编辑体验。 OverType 是一个 Markdown 编辑器库，底层保留原生 textarea 负责输入，在其下方绘制带样式的预览层。textarea 透明，预览与输入使用等宽、等字号排版，因此输入内容与渲染结果逐字对齐，Markdown 语法符号也保持可见。

overtype 可以免费使用吗？用的什么许可证？

overtype 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

overtype 还在维护吗？

活跃维护中。overtype 最近一次提交是在 2026年10月10日。

overtype 适合用来做什么？

在网页表单或评论框中加入轻量的 Markdown 输入，无需构建步骤。 在单文件网页应用中构建笔记或文档编辑器。 在需要良好移动端键盘支持的页面中嵌入 Markdown 编辑器。 使用独立解析器在服务端将 Markdown 渲染为 HTML。

overtype 怎么安装和运行？

从 npm 安装该包: npm install overtype 导入 OverType 并在容器元素上创建编辑器: import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });

在哪里获取 overtype？

源代码和安装说明在 GitHub 上：https://github.com/panphora/overtype