侧边栏壁纸
  • 累计撰写 386 篇文章
  • 累计创建 1,025 个标签
  • 累计收到 16,613 条评论
标签搜索
隐藏侧边栏

【转HelloGithub】Milkdown:任由文字肆意流淌,更自由的开源 Markdown 编辑器

thinkin
2021-09-23 / 0 评论 / 1 点赞 / 576 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2021-09-23,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

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

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

但,同样的也有些缺点:

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

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

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

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

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

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

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

一、上手

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

在线尝试、VS Code 插件

1.1 功能展示

方便的编写表格:

直接粘贴和复制 Markdown 文本:

甚至协同编辑:

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

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

1.2 第一个编辑器

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

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

1.3 丰富的插件

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

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

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

二、技术栈

Milkdown 基于下面的工具实现:

  • Prosemirror:一个用于在 web 端构建富文本编辑器的工具包
  • Remark:正确的 Markdown 解析器
  • TypeScript:以 TypeScript 编写
  • Emotion:用于构建样式的强大的 css in js 工具
  • Prism:代码块支持
  • 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 期 月刊,然后受邀合作了这篇文章,让更多人知道我的开源项目。


原文转自:HelloGithub

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

0
并发 、80端口节点、ss、ss机场、ss节点、v2ray、v2rayng、v2ray机场、v2ray节点、v2ray节点免费2022、v2ray订阅、vmess、vmess机场、vmess节点、vpn、俄罗斯节点、免费vpn、免费节点、内地接口、台湾节点、日本节点、机场、欧洲节点、美国节点、老五节点、节点、节点免费订阅、谷歌访问助手、韩国节点 2022最新节点 小程序开发 微信公众号涨粉 φουσκωτα στρωματα υπνου shadowsocks-mod soap 微信公众号运营 หนังออนไลน์ฟรี vvpn webservice wp文章隐藏部分内容 หนังเกาหลี sr节点后台搭建 web 在线工具 หนังออนไลน์ฟรี 2019 shadowrocket订阅v2ray text 在线图片压缩 เว็บหนังออนไลน์ดูฟรี ชัดเต็มเรื่อง shadowrocket App 文本展开与收起 json格式化 nowoczesne ogrodzenia pionowe 小火箭 安全 总结 xml格式化 sztacheta drewniana allegro sr节点前端搭建 软件 当你绝望时最接近成功 http在线请求 sztachety kompozytowe pełne Navicat Premium 15 三层架构 在线接口模拟 order flowers for delivery today 数据库工具 自适应 程序员和产品的矛盾 same day flower delivery usa 软件激活 Android 平板电视开发 程序员为啥生气 flowers today delivery 国内节点 开发 虚拟按键 excel文件讀取 toys ssr订阅 进程保活 matlab c#文件读取 autism sip002订阅 框架 lib OleDB craigslist trojan订阅 性能 数据 wifi ซีรีย์เกาหลี ss订阅 list bmob 网卡驱动 nowoczesne ogrodzenia betonowe trojan节点 for循环 app升级 重装无线网卡驱动 ogrodzenia drewniane allegro sip002节点 java matlab2015b wifi连接不上解决方案 ogrodzenia betonowe szemud ios节点 Google 破解安装 华硕笔记本 simulation mobile games 免费节点订阅 PWA 异常处理 ดูหนังออนไลน์ hd vmess订阅 Chrome CopyFile 技术 ดูหนังออนไลน์ยอดนิยมปี 2020 神秘的程序员 C++ string 比特币 ดู Netflix 1024 编程语言 类型转换 区块链是什么 ดูซีรีย์ 程序员是一群什么样的人 C++17 vector转数组 去中心化 how to write a general essay 老五节点 程序员 atoi与atof 分布式数据库 paper to write on Android 12 程序员中年危机 getLine Canva college essay editor 2021Google开发者大会 strtok 在线作图工具 量桨 节点免费订阅 HTTP 时间转换 工具软件推荐 国内首个量子机器学习开源框架 免费vpn 404 Elastic Search 开源框架 v2ray机场 阿尔法狗 JSONObject合并 or操作 free essay writer vmess机场 AlphaGo json should和must when writing an essay ss机场 AI 招聘 filter essay edge 双12 人工智能 彩蛋 win10开始菜单点击无效 Log4j 谷歌 字符串 win10开始菜单不能点击 2022最新节点 谷歌访问助手 就业 微信小程序我的页面 系统更新 翻墙 HignCharts 小程序我的页面布局 换新机 反编译 图表 elasticsearch filter should 日本节点 jadx chart es索引 韩国节点 经验 分页 elasticsearch基础 80端口节点 编程 MySql java json合并 欧洲节点 小程序 数据库 json处理 美国节点 网页 百度云盘 비트카지노 俄罗斯节点 微信 json解析 슬롯 카지노 台湾节点 开源 simdjson 카지노나라 v2ray节点免费2022 互联网 Vue 授权获取手机号 รีวิวหนังใหม่ code 密码 LocalBroadcast 组件开发 รีวิวหนังออนไลน์ 内地接口 web-view 局部广播 getPhoneNumber แนะนำหนังใหม่ปี 2020 cnzz 阿里巴巴 js交互 地理位置授权 birthstone necklace 网站统计 2017 apk disabled样式不可用 name plate necklace 51la IT 签名 短网址生成 gold cross necklace 百度统计 大事件 资源 老五 how we write essay 一键安装 脚本 图片 重定向 information about essay writing 傻瓜教程 HashMap 视频 essay on bank centos8 机器学习 分享 Minimum Viable Produc 数据挖掘 敏捷开发 最小可行产品 weka Scrum 敏捷和精益开发 随机森林 AppScan buy paper IKVM 漏洞修复 mba essay IKVM.NET dotnet hints on essay writing dll OnClick tempur στρωματα wp 事件 στρωμα tempur 统计 Network Security διπλες κρεβατοκαμαρες join jar转dll autocomplete androidx .net AutoCompleteType androidx与support v4/v7冲突与共存 jdk8 密码自动填充 android低版本升级到高版本 加载动画 小萌伴 android问题解决 源码 聊天机器人 CoreDNS dieta e caminhada 自定义控件 广告过滤 DNS o que dieta enteral Annotation 迭代 前端框架 dieta whole 30 cardapio 基础 敏捷实施 Excel café com leite tem carboidrato 注解 敏捷工具 trim o leite possui carboidratos AR leangooo 浏览器兼容 qual leite não tem carboidrato 增强现实 迭代管理 字符串去空格 tim k ARCore 禅道 页面生成pdf no strings attached 免费课程 zentao html paw patrol Collections 蒙版弹窗 hosts Photoshop API 996 发送邮件 图片编辑器 深度学习 996.ICU Affinity Photo 图片压缩 加班 Blockchain GNU WebP 公众号 面试指南 Photoshop 替代品 BPG IT老五 亚马逊 GNU 图像处理程序 TNG it-lao5 视频算法 常用方法 腾讯 itlao5 DVQA 校验 投资 2048 C3DVQA 工具方法 金融 bird 视频质量评估算法 更改注册表 腾讯生态圈 小鸟 AI训练 CredSSP加密Oracle修正 蓝牙 打飞机 wp站点置灰 CredSSP加密数据库修正 BLE 目录 tiktok windows Kotlin 手电筒 抖音 安全漏洞修复 开发资源 语音识别 抖音国际版 windows server 语音合成 免vpn DHCP Client 移动开发 语音唤醒 梯子 禁用445端口 微信开发 我的页面 v2ray Message Queuing 苹果 微信授权 vpn WWDC 用户信息获取 搬瓦工 document 霍金 菜单列表布局 优惠码 js异步加载 大事记 zoom xshell cnzz统计 预言 控件缩放 复活节 百度收录 RxJava wxs skew elastic 教程 手机号/身份证号隐藏 anagram 大数据看板统计 响应式编程 周末 do a barrel roll Kibana代码 iPhone 陪伴 免费电影 破解 找手机 天堂影视 SKEP GrayKey itlao5-xmb-weapp 资源分享 情感分析 漏洞 小程序跳app 老五影视 百度 webview 说话 VIP电影 Senta h5 语言表达 заказать создание сайта визитки Github推荐 AndroidP 面试 автоматическая воронка продаж 室内定位 职场 продвижение сайта Youtobe克隆项目 组件化 日期格式化 money loans online with bad credit 前端源码 二维码 经验总结 money mart loans online React 算法 post money loan scams VINE 网络请求 premium porn portal 神经演化 CoinTiger top paid porn sites Uber ftn paid porn sites Https porn sites premium 泛域名证书 ssl best premium porn Let's Encrypt tls premium porn sites 设计模式 语言 团队管理 love flower JavaScript Java10 沟通 love flower bouquet 项目管理 区块链 薪资 best flowers of love 需求 js 按钮事件 thinking of you flowers 开发源码 代码 重复点击 romantic flower delivery bug修复 哈希 节流函数 arrangements love flower c# gradle 微信二维码识别 best flowers for love protobuf 多二维码识别 roses love 语言 & 开发 二维码长按识别 funny pillows 文章同步助手 DevOps neck pillow funny 微信同步助手 云计算 wp迁移 top rated cervical pillows 一键发布文章 敏捷技术 阿里云 payday loans montgomery alabama 多平台文章一键发布 敏捷 站点迁移 direct lender payday loans online bad credit 自媒体 Kubernetes 站点备案 payday loans online with direct lenders redis 持续集成 段子 floral arrangements funeral 网络安全 Android Studio 友链 flower arrangement for funeral service 安全等保 D8 友情链接 flower delivery for funerals 三级等保 Dex judi casino k免费节点 编译器 程序员笑话 judi casino online 免费节点 Animation 哪吒 casino sbobet 动画 华为 woman has sex with two men 影视资源 鸿蒙系统 free sex teacher 电影分享 谷歌AndroidQ milfs in porn VIP影视 苹果窃听门 coin master 天猫超市 太空互联网 앙기뮤찌 漏洞券 华为地图服务 birthday gift for wife online 白菜群 今日推荐 send birthday gift baskets 淘宝 CentOS7 移动端兼容 flower birthday 京东 BBR 科学上网 Organic cbd 拼多多 VPS google-access-helper-2.3.0 Cbd gummys 机场 JNI 谷歌访问助手2.3.0破解版 wget win101 反射 十大经典排序算法 birthday gifts best 激活 Google I/O 2018 桶排序 birthday delivery ideas 谷歌访问 Android P 排序算法 best birthday flower es 朋友圈 桶排序源码 fifa 20 DB搜索引擎 Github html转pdf birthday present for wife 搜索引擎 MaterialDesign 网页转pdf cheap birthday balloons emoji Android Things jspdf love flowers for girlfriend 哪吒重生 操作系统 html2canvas flowers from you 浴血无名川 Material Design 十大经典算法 flowers love 侍神令 SDK 堆排序 keto grocery shopping list walmart 许愿神龙 view 完全二叉树 supplements for memory 送你一朵小红花 ui 堆积 keto costco shopping list reddit VIP影视 免费电影 电影分享 资源分享 架构设计 Android 10 FQ v2ray 免费节点 机场 科学上网 谷歌访问 移动 Android Q episode choose your story 技术一号位 TensorFlow Android正式版 iphone 6s cases walmart 研发管理 TensorflowLite Android全新logo sonix iphone case WX Backup 人声识别 angel iphone 7 silicone case 微信备份 gVisor 开源项目 艾菠 微信聊天 go 腾讯开源 aiboobeauty 聊天记录备份 沙箱 全栈机器学习开源模型 艾菠手工紋繡藝術 微信聊天记录 Activity 广告插入 personal essay db、 生命周期 help with my essay db 启动模式 essay writing format 会议 Netflix 华为方舟编辑器 PORN zuul 安卓10 narrative and descriptive writing 萨尔瓦多 微服务 安卓框架推荐 what to write an essay about 法定货币 网关 童年 how to write an essay 货币 Android周报 黑猫警长 Wuhan Wild Wings T Shirt Fuchsia OS OpenStack ipone porn photo of elderly old women 鸿蒙OS Rust 浴霸三摄 softcore photo butt close-up 主题 物联网 ihone11 watch pornography video 节点 TensorFlow Lite 苹果发布会 help with writing openBI 中文教程 Nexus essay writers uk 可视化报表 bug 智能手机 how to essay 开源BI工具 游戏 插件 phone looking 职业生涯 x86 网站建设 att cell phones HarmonyOS PC 谷歌字体无法加载 gadgets christmas gifts DevEco Studio Flutter 图片延时加载 blondine sexfilme AndroidStudio MVP Grow with Google freund xxx porno 编码 架构 谷歌成长计划 amateurporno Copilot MVC 谷歌在华 nha cai casino online tinycat99.world 团建 性能优化 Manjaro Linux 18.1 tinycat99 公司 Service LibreOffice royalty 神墓 四大组件 FreeOffice ben stokes the sun 哥斯拉大战金刚 广播 Fluteer mocospace chat 悬崖之上 BroadcastReceiver ios writing sa nginx App Maker 开发者 how to write an essay step by step apache 工具 语音输入 cheap essay writing service uk 禁止ip访问 多应用同时音频输入 神州天堂网 节点分享 PDF2Word 新公式 天堂文学 端口 生物识别 WPS Office 影视动漫 最新免费节点分析 身份验证 google chrome v77 小说网站 Fuchsia 程序员段子 免费vip 图片保存 Linux 程序员动图 emergency carpet cleaning brisbane 注册表修改 os C++ 标准库(STL) express carpet cleaning brisbane 图片格式 Python 3.7 微软 angel carpet cleaning brisbane reviews vmess Python MSVC situs gaple online ss 高级编程语言 Microsoft STL kode domino gaple online 香港节点 面向对象 TencentOS tiny download gaple online apk wifi连接 微信小程序 物联网操作系统 best love letter to your girlfriend on her birthday wifi-card 下拉刷新 量子计算机 love letter for her birthday tagalog 扫码连接wifi SpeedPan 商用量子计算机 love letter menu irvine 节点连接器 速盘 IBM 성인사이트 TLS1.2 百度网盘 计算机 ดูหนังออนไลน์ ssl/tls 下载 53-Qubit ดูหนังออนไลน์เต็มเรื่อง v2ray节点订阅 Aria2 53比特量子计算机 国外版抖音 节点订阅 css OpenJDK 13 海外版抖音 自定义菜单 前端 龙芯中科 抖音点赞关注无效 服务器配置 ImageSpan OpenJDK最新版本 MuMu模拟器 v2ray错误 控件 OpenJDK qq deposit pulsa v2ray问题 CIRQ Java环境 qq online dns刷新 量子算法框架 JDK 13 judi qq online VIP影视免费电影 Lineage 老五影院 descriptive narrative essay outline 天堂影院 ROM vip视频 comparative essay 无广告白嫖电影 Pixel 免费视频 a research paper 正义联盟 Pie 无广告电影电视剧 etax 白蛇2 Android 9.0 免费无广告vip视频 lil tecca 中国医生 Android Pie 视频网站 abc Milkdown 手机使用时间统计 电影网站 assignment help 文本编辑 z 免费资源 term papers and essays Markdown ScreenToGif CentOS 8 narrative and descriptive essay 误删文件 gif Red Hat 编程规范 文件恢复 屏幕录制 .NET Core 如何写出无法维护的代码 救援模式 win10 .NET Core 3.0 如何写出好代码 误删文件恢复 服务 vs pattern of essay writing in english v2ray节点 UserManager Visual Studio how to create an essay ss节点 MvRx Visual Studio 2019 16.3 write paper for me vmess节点 Airbnb Visual Studio 2019 essay guide 工程师 芯片 law essay writing service 跳槽 RecyclerView 阿里 essay draft 工作 强化学习 AI推理芯片 best same day delivery flowers TensorBoard 全球最强性能的AI推理芯片 best place to send a flower delivery same day خرید ویپ Crash 含光800芯片 order flowers for today ویپ اسموک 支付 NPU easy online loans bad credit ssr节点 微信支付 Android 11 quick easy payday loans for bad credit ssr节点分享 优化 easy loans online win11 wp优化 服务器 payday loans albuquerque win11镜像下载 站点优化 应用程序 payday loans mn Windows 11中文版 网站提速 微信公众号 direct lender payday loans no teletrack v2ray订阅 ios兼容 微信信息流 instant payday loans v2rayn 时间戳转换 微信二维码 instant online loan approval no credit check v2rayng sql 二维码识别 instant loan online 老五节点订阅 sql优化 长按识别二维码 best sushi near me 支付宝 weka-nogui html5 luxury dark 红包 wordpress 自定义协议 car 薅羊毛 浏览次数统计 chrome自定义协议打开ie浏览器 join διπλα κρεβατια 支付宝红包口令 wp免插件 微信公众号吸粉 stromata SSPanel-Uim v2ray订阅 台湾节点 香港节点 vmess节点 Harmony OS 鸿蒙 华为 v2ray节点 免费节点 资源分享 ss节点
  1. qrcode alipay
  2. qrcode weixin

评论