网易首页 > 网易号 > 正文 申请入驻

任由文字肆意流淌,更自由的开源 Markdown 编辑器

0
分享至

对于创作平台来说内容编辑器是十分重要的功能,强大的编辑器可以让创作者专注于创作“笔”下生花。而最好取悦程序员创作者的方法之一就是支持 Markdown 写作,因为大多数程序员都是用 Markdown 来写文章。

Markdown 作为程序员写作的心头爱,有很多优点:

  1. 通过语法实现排版,不需要点选手动设置样式
  2. 快速实现复杂内容,如:代码块、超链接、公式等
  3. 让创作者有更多时间专注于内容

但,同样的也有些缺点:

  1. 有一定的学习门槛,对于非程序员不太友好
  2. 看原文档就像看“代码”,预览效果需要工具或编辑器支持

那有没有能够既保留 Markdown 带来的便利,同时又降低门槛的办法呢?大多数老玩家会脱口而出:Typora

Typora 直接使用完全没有问题,但由于它没有开源。如果想在自己的项目实现类似的 Markdown 编辑器,就需要另寻方案了。

如果你正在寻找功能强大、易于接入、所见即所得的 Markdown 编辑器、组件、插件,就请花 5 分钟读完本文!

接下来 HelloGitHub 带来的开源项目完全满足上述需求。Milkdown 一款高颜值+自由(插件)的所见即所得,集合 Markdown 编辑器、组件、插件于一身的开源项目。

你想要的功能它都有,不想要的功能也可以通过删减插件,减少体积。插件的设计思想+完善的中文文档,让你分分钟定制出最适合自己的 Markdown 编辑器!

下面跟着项目作者一起来感受 Milkdown 的魅力吧。

一、上手

下面提供了 2 种方式,可直接体验:

方便的编写表格:

直接粘贴和复制 Markdown 文本:

甚至协同编辑:

双栏 Markdown 编辑器很常见。但双向绑定 的 Markdown 编辑器,目前仅此一家:

功能方面就介绍这么多,下面用 Milkdown 轻松实现个编辑器。

1.2 第一个编辑器

Milkdown 的核心以及各种插件都是独立的 NPM 包,可以直接通过 NPM 来进行安装。

我们先使用make 来初始化编辑器,然后使用use 来加载插件,最后使用create 来创建编辑器。

插件是 Milkdown 的核心,它本质上就是一个插件加载器,一切功能都是通过插件来提供的。表格是一个插件、主题是一个插件、甚至一行简单的文本也是一个插件。

目前官方已经提供了许多插件,确保可以开箱即用。下面仅列举了部分插件:

也可以自己动手编写插件,更多详情

二、技术栈

Milkdown 基于下面的工具实现:

  1. Prosemirror:一个用于在 web 端构建富文本编辑器的工具包
  2. Remark:正确的 Markdown 解析器
  3. TypeScript:以 TypeScript 编写
  4. Emotion:用于构建样式的强大的 css in js 工具
  5. Prism:代码块支持
  6. Katex:高性能的渲染数学公式

富文本编辑器本身是一个天坑。虽然 ContentEditable 看起来很美好,但实际用起来就会发现问题层出不穷。因此我们基于 Prosemirror 来实现富文本编辑器。因为它足够成熟、久经工业的锤炼,并且拥有良好的架构和 API 设计。

三、架构

Prosemirror 的核心逻辑其实类似于 React,它通过一种函数式的数据映射来体现编辑器的 UI 和内部状态的关系,如图:

编辑器通过 EditorState 来保存当前状态,并由 EditorState 产生出 EditorView,即 UI 视图。 用户在 UI 视图上进行的操作最终会产生 DOM event,例如:input 事件、click 事件。DOM event 事件会产生 Transaction,代表了对 State 的修改,类似于 Redux 或 Vuex 中的 Action。 这些 Transaction 会与原来的 EditorState 进行计算,产生新的 EditorState,如此循环。

Prosemirror 通过这样的方式将编辑器中的每个状态以 EditorState 的方式保存了下来,它是一颗树状结构。而有一点编程原理基础的朋友都知道,任何编程语言都有对应的 AST(抽象语法树)。因此我们需要的就是建立 Prosemirror 中的 EditorState 与 Markdown 的抽象语法树之间的联系。 Remark 完美契合我们的需求,因为它有设计良好的 AST,并且易于扩展自己的语法。

这样一来 Milkdown 的架构也逐渐清晰:

Markdown <-> Remark AST <-> Prosemirror State <-> UI
四、结语

在开始这个项目之前,我尝试过各种各样的 Markdown 编辑器,但没有找到一款特别满意的。因为它们都是闭源,而且功能由开发商提供,有的功能太过于臃肿、有的又太过简单。 既然这样,我索性自己做一款能够轻松定制功能,非程序员也能轻松使用的 Markdown 编辑器,也就有了大家看到的 Milkdown。

希望开源的 Milkdown 让用户有更自由的选择,打破 Markdown 编辑器的“垄断”。开源不易如果 Milkdown 对您有帮助,也请给个 Star✨。

最后,感谢 HelloGithub 的支持和帮助。Milkdown 先是有幸入选了 第 65 期 月刊,然后受邀合作了这篇文章,让更多人知道我的开源项目。

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
韦世豪分享朱辰杰搞怪图,后者回应:哥,最后一张照片真的珍惜吗

韦世豪分享朱辰杰搞怪图,后者回应:哥,最后一张照片真的珍惜吗

直播吧
2024-03-28 13:36:22
福耀科技大学硬件不俗,连食堂椅子都是实木的,张雪峰却另有锐评

福耀科技大学硬件不俗,连食堂椅子都是实木的,张雪峰却另有锐评

非娱勿扰
2024-03-28 13:41:05
TVB玩大了,内地绝对不敢这么拍

TVB玩大了,内地绝对不敢这么拍

港叔
2024-03-28 10:43:03
疯狂!三个城市,三个地王!

疯狂!三个城市,三个地王!

城市财经
2024-03-28 12:04:25
闹大了!徐亮一句话就把颜骏凌送上热搜!球迷:好人都让你当了?

闹大了!徐亮一句话就把颜骏凌送上热搜!球迷:好人都让你当了?

元爸体育
2024-03-28 09:42:02
半岛电视台曝光视频:以色列士兵射杀手无寸铁巴勒斯坦人 用推土机掩埋尸体

半岛电视台曝光视频:以色列士兵射杀手无寸铁巴勒斯坦人 用推土机掩埋尸体

环球网资讯
2024-03-28 10:34:16
2015年8月21日,汪东兴因病在北京逝世。

2015年8月21日,汪东兴因病在北京逝世。

海梦游者
2024-03-26 17:25:47
专家提醒:这2种“坚果”坚决不能吃,既无营养又伤身体!

专家提醒:这2种“坚果”坚决不能吃,既无营养又伤身体!

美食手记本
2024-03-28 10:40:38
《浪姐5》继美国女星退赛后,又一个女星宣布退出,原因疑似曝光

《浪姐5》继美国女星退赛后,又一个女星宣布退出,原因疑似曝光

岚仔小弟
2024-03-28 01:52:04
追梦赛后对库里晚安?勇迷:MD我要是库里就给追梦一拳

追梦赛后对库里晚安?勇迷:MD我要是库里就给追梦一拳

直播吧
2024-03-28 18:01:36
“老虎”突然被拿下后,贵州省委:坚决拥护党中央决定

“老虎”突然被拿下后,贵州省委:坚决拥护党中央决定

政知新媒体
2024-03-28 12:20:36
李铁案新进展!刑期或创足坛纪录,近况遭曝光,忏悔痛哭为时已晚

李铁案新进展!刑期或创足坛纪录,近况遭曝光,忏悔痛哭为时已晚

体坛春秋
2024-03-28 02:34:42
南通市民政局回应禁止制售殡葬用品:我们强调禁止制造销售,没提禁止使用,商家:禁售纸钱若实施,大批人将失业

南通市民政局回应禁止制售殡葬用品:我们强调禁止制造销售,没提禁止使用,商家:禁售纸钱若实施,大批人将失业

纵相新闻
2024-03-27 18:05:24
勇气可嘉,四川一中学家长硬扛老师与家委:我不买,这是道德绑架

勇气可嘉,四川一中学家长硬扛老师与家委:我不买,这是道德绑架

东东趣谈
2024-03-28 15:03:52
3-0!孙颖莎复仇平野,日本奥运名将1轮游,统治力拉满令对手绝望

3-0!孙颖莎复仇平野,日本奥运名将1轮游,统治力拉满令对手绝望

环太平洋老正太
2024-03-28 14:50:14
焕新上线!成都蓉城主场凤凰山修剪成为阴阳魔方草坪

焕新上线!成都蓉城主场凤凰山修剪成为阴阳魔方草坪

懂球帝
2024-03-28 16:16:19
印度仿制痛风药疑遭保健品山寨续:全网下架后仍被引流至微信私售

印度仿制痛风药疑遭保健品山寨续:全网下架后仍被引流至微信私售

澎湃新闻
2024-03-27 15:44:30
官方:未来三年内,K1联赛到K7联赛将全面实行升降级制度

官方:未来三年内,K1联赛到K7联赛将全面实行升降级制度

直播吧
2024-03-28 15:12:29
扎哈罗娃凌乱了!只有乌克兰不谴责莫斯科恐袭事件

扎哈罗娃凌乱了!只有乌克兰不谴责莫斯科恐袭事件

老马拉车莫少装
2024-03-27 23:49:26
4-1却让伊万愤怒,颜骏凌后又将有2人被拿下,他只想赢球不讲人情

4-1却让伊万愤怒,颜骏凌后又将有2人被拿下,他只想赢球不讲人情

我就是一个说球的
2024-03-27 19:29:51
2024-03-28 18:20:49
HelloGitHub
HelloGitHub
带你玩GitHub开源社区
190文章数 5248关注度
往期回顾 全部

科技要闻

王传福称合资品牌份额将降到10%

头条要闻

马英九将再访大陆 台绿营怂恿他在大陆散布"台独"主张

头条要闻

马英九将再访大陆 台绿营怂恿他在大陆散布"台独"主张

体育要闻

池江璃花子:我不打算输

娱乐要闻

莱昂纳多与25岁新女友互相投喂超恩爱

财经要闻

疯狂!三个城市,三个地王!

汽车要闻

混动增程双模式 长安UNI-Z售11.79万起

态度原创

本地
教育
时尚
家居
军事航空

本地新闻

专访|张伟潮:最年轻的龙头专职制造者

教育要闻

导师服补上了!XM,毕业快乐!

女团人手一副的nerd风眼镜,原来真的那么好戴!

家居要闻

邂逅浪漫,注入柔性的法式基因

军事要闻

乌方声称击落两枚俄"锆石"高超音速导弹 俄方未予回应

无障碍浏览 进入关怀版