##为什么是单文件
工具库的依赖树越深,出问题的面越大。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