这也许是最强势的 所见即所得 Markdown 编辑器 🤟🏻

[laobubu]

这个去年发过，但是当时算是一个写得挺乱的实验品。 上个月我重新拾起来这个项目，好好地用 TypeScript ~~重构~~ 重写了一番。

这是一个 Markdown 编辑器组件，基于 CodeMirror，目标是：

打破 Markdown 写作 和 预览 的 次元壁！

在线体验 | GitHub 项目地址

这个编辑器组件很容易集成到网页中，具体可以参考 https://laobubu.net/HyperMD/docs/ HyperMD 的文档

---

先大致看一下 在线体验 页

能够自动隐藏、渲染许多 Markdown 元素。几乎是所见即所得！

大家可以随便找几个 Markdown 文件，把内容复制进去试试看。

---

还有许多不同的体验……

上传图片（甚至是文件）

演示页不支持上传文件，但是图片还是可以试试的。

Ctrl+点击，打开链接，跳转脚注，改变 TODO 状态

复制网页，直接粘贴成 Markdown

这个基于第三方库做的

支持表格、列表、数学公式等、甚至一些内嵌的 HTML 元素

• 对于代码块，能够自动载入语法高亮规则
• 可以用 Tab 和 Shift-Tab 编辑表格和列表
• 可以嵌入 HTML，实现居中显示和自定义元素等（虽说这个功能还有一点问题）

---

说明一下，这个是只是个编辑器组件，因此下面这些功能都不支持：

• 读取、保存内容
• 云同步笔记
• 文档管理
• 上传文件到云盘（除非自定义一个上传回调函数）
• 管理 Jekyll 或者其他博客的文章

如果有兴趣的话，可以考虑基于这个编辑器组件，一起来搞个新项目。

另外，这个项目里也有一些有意思的地方，比如用 TypeScript 自动生成 API 文档、组件设计之类的。（如果这个项目有关注度的话，也许可以梳理一下里面的技术？）

[menc]

@zthxxx
人家这是前端组件，不是一个软件

[exception]

不错

[airyland]

看到 26 个收藏，没有一个感谢，给楼主补了一个。

[ofooo]

表格处理怎么样? 平常用 typera,如果好的话换一下试试. 所见即所得,快捷键插入表格等等.

[cy97cool]

求一个 Ctrl+V 就传图的功能 监听页面的 paste 事件 发起上传请求后把得到的 URL 插入到当前光标位置

[fy]

虽然挺好的，但是……

为什么都是 CodeMirror 呢

[xupefei]

LaTeX 在线编辑平台 Overleaf 也有类似的所见即所得功能。看起来不错但实际上很不好用。
考虑到 Markdown 比 LaTeX 简单不少，前者的所见即所得好不好用还不好说……

[cy97cool]

忽视我上一条 果然大佬已经实现了这个功能 666

[laobubu]

@fy CodeMirror 吼啊，用户的输入输出都是源代码字符串，开发者还能定制各种样式和插件，大家都爱用。

@ofooo 表格的话，只能是大概能用，毕竟用的编辑器后端限制还是挺多的。

[JohnChiu]

很强大，支持一下

[cy97cool]

https://laobubu.net/HyperMD/docs/examples/ai1.html

这个 all in one 的页面还是引入了太多依赖的 js。。。

不想折腾前端的表示能不能提供个真正的 all in one 的 js 文件，这个 js 不要再载入其他 js （自己包含 code mirror 等等），便于部署到内网（不能访问 CDN ）

搞个网站让我来选择需要的扩展功能、填好配置项提交就能得到一个省心的 js 就更好了 例如并不想要 MathJax

[laobubu]

@cy97cool
使用纯 HTML 的话，手动引入所有依赖是不可避免的。如果受不了手写依赖，请参考文档中“使用打包器”的部分： http://laobubu.net/HyperMD/?directOpen#./docs/zh-CN/index.md

再次一点，可以 使用 RequireJS 模块加载器

[cy97cool]

@laobubu 我的想法是打包过程我不想了解
你的网站直接按需提供你打包好的 js 给我下载就完美了

[OSF2E]

不熟悉你的项目的目录结构，问几个伸手党性质的问题：
目前市面上的常见的 MD 编辑器中的 MD 语法解析库是开发者自己造的轮子还是使用的第三方开源库？（是或否）
如果是使用的第三方库，那么能否多推荐几个？
如果是轮子，能否告知下轮子的在该项目仓库中的位置？

[laobubu]

@cy97cool
如果不需要第三方库（例如 MathJax ），删掉它们，以及对应的 PowerPack 就行了。
例如 MathJax 对应的是 powerpack/fold-math-with-mathjax

ai1.html 里 [(optional) PowerPacks ] 那部分可以全部删掉的。

[LeungJZ]

emmmm 确实不错的，我想用在我的博客上了。

[zuolan]

第一感受很棒, 保持关注.

[hdyl]

支持一下

[laobubu]

@OSF2E 基本都用的轮子啊。HyperMD 最初也是造了半个轮子，但是后面放弃了(见 feature-new-mode 分支)，改为在 CodeMirror 的 Markdown Mode 上打补丁。

Markdown 语法非常简单，自己练手写一个也可以。这个网站收录了很多 Markdown 引擎，随便输入段 Markdown 试试看： http://johnmacfarlane.net/babelmark2/

[OSF2E]

@laobubu 谢谢，这个问题困扰我好久了