v2.0.0 MIT · 单文件 · 零依赖

一个文件,
装下整个 Markdown 编辑器

不用 npm,不用打包器。引入一个 script 标签,三行代码,你的项目就拥有 分屏实时预览、15+ 语言语法高亮、XSS 防护与完整事件系统的生产级写作体验。

<script src="md-editor.js"></script> — 就这么多

↑ 右侧由本页加载的真实 MdParser 渲染


##为什么是单文件

工具库的依赖树越深,出问题的面越大。md-editor.js 把解析器、语法高亮器、样式与交互全部收进一个文件——不是妥协,是工程决策。

01

单文件,零依赖

UMD 三兼容(script / CommonJS / AMD),约 56 KB 未压缩。没有依赖树要审计,没有版本冲突要排查,复制一个文件即完成升级。

02

自研解析器与高亮器

迭代式 tokenizer 替代递归下降,超大文档不会栈溢出;高亮器输出结构化 token,在输出点统一转义——双引号字符串高亮损坏这类 v1 级缺陷已被 44 项测试锁死。

03

XSS 输出点转义

行内内容、代码块、语言标签各自由独立管道转义;链接 URL 走白名单净化,javascript: 伪协议直接拦截。安全不靠插件,靠架构。

04

分屏 · 同步滚动 · 全屏

编辑 / 预览 / 分屏三种视图一键切换,滚动位置双向同步;写作需要专注时,全屏模式让界面完全退让给内容。

05

完整事件系统

change / theme / view / export / confirm 事件与 onConfirm 回调替代阻塞式 confirm()——主线程永不冻结,界面由你接管。

06

TypeScript 声明 · SSR 安全

附完整 .d.ts 类型声明;构造器检测 document,在 Node 环境中抛出清晰错误而非晦涩的 undefined 崩溃。

1
个文件,全部搞定
0
运行时依赖
56KB
未压缩体积
44
测试用例 · 全部通过

##快速开始

从引入到可用,不超过一分钟。

01引入

<!-- 自托管,或换成你的 CDN 地址 --> <script src="md-editor.js"></script>

或使用 npm:npm i md-editor-single

02挂载

<div id="editor"></div> new MdEditor('#editor');

03按需配置(可选)

var editor = new MdEditor('#editor', { theme: 'light', // light | dark view: 'split', // edit | preview | split height: '620px', autoSave: true, // 草稿自动保存到 localStorage onChange: function (v) { // 内容变化 console.log('length:', v.length); }, onConfirm: function (p) { // 非阻塞确认 myDialog(p.message).then(p.onOk); } }); // 完整 API:getValue / setValue / getHTML / // wrapSelection / setTheme / setView / on / off / // toggleFullscreen / exportFile / destroy

#现在就试一试

打开在线演示,随意编辑——你的草稿会自动保存在浏览器里,关掉页面也不会丢。

打开在线演示