分享 一个 Markdown 编辑器的诞生

zhd_superman · 2021年03月09日 · 最后由 zhd_superman 回复于 2021年03月12日 · 884 次阅读

为什么要开发一款新的编辑器

自从我开始使用 Markdown,就爱上了这种标记语法,轻量、纯文本兼容是最大的优点,哪里都可以编辑,一开始是在 IDE 上直接编辑,后来笔记越来越多,需要上传图片,有云同步、搜索的需求,尝试了 typora、有道云笔记、印象笔记、为知笔记后,发现各有个的缺点,除了 typora 大多数都是左编辑右预览的分屏模式,这对一个左撇子来说很难受,就像要我用右手拿剪刀裁剪一样,typora 是其中体验最好的,无奈没有在线版本,搜索、云同步、图片上传功能无法实现(或者需要复杂的配置),想到很多人也有类似的痛点,于是拉起团队打算搞在线版的 markdown 编辑器,目标是要达到 typora 类似的编辑体验,甚至更好。

叫什么名字

给一个产品起名字确实是很困难的事,既要国际化又要本地化,还得深度结合产品(比如知乎、百度中文含义深,但域名直接使用拼音也决定了产品国际化的困难),日思夜想,无意间想到 markdowner 这个名字,er 后缀结尾有特定人群的意思,如 follower,lover,中文名可以直接取自发音:码道人。码是代码的码,意思是编程道路上的人。nice ! 中文有深意同时解决国际化本地化的难题。

口号

码道人,开发者最好的朋友:Markdowner is coder‘s best friend.

最终效果

😁 先给大家看看效果,满足好奇心

插入文本样式

所见即所得,无需使用鼠标和工具栏,正常的 markdown 输入即可得到您想要的样式,全兼容 markdown 语法,没有任何输入负担,让您更专注于内容创作。

插入代码块

快捷输入、支持多种语言、自动语法高亮、tab 键自动转换为空格,类似 IDE 的编辑体验

插入数学公式

支持 Latex 语法的数学公式,$$ + enter 快捷插入,一边编辑一边预览,高效简洁

插入表格

全功能的表格编辑体验,避免手动输入字符排版,支持对齐、插入、删除,简洁实用高效。

自动排版检查(Markdown lint)

自动检查常见排版错误,比如代码块中的 tab 键、不连续的标题跨越、标点符号前空格等,可以查看错误信息,双击提示按钮可自动修复错误,帮助排版出更漂亮的文档。

智能黏贴

可以直接黏贴来自编辑器或其他网页的内容,自动转换为 markdown 格式,无需再次手工排版。

源码编辑模式

随时可切换到源码编辑模式,复制黏贴原始 markdown 文档,两个编辑器的数据是同步且兼容的。

图片插入无阻塞

支持直接拖动上传,操作更加方便,可在上传图片的同时编辑其他区域的文字,无需等待图片上传完成,编辑无阻塞。

响应式布局

全站响应式布局,兼容 Paid 和移动端显示,支持分屏显示,避免频繁切换窗口,边看资料边记录,关注点分离,全程无阻塞。

实现细节

多端兼容之 Twitter 三段式

现在移动端用户越来越多,网页多端兼容是必须的,如此一来必须解决一个世界性的 UI 难题:

移动端水平空间不足、电脑端垂直空间不足(系统任务栏 + 浏览器 tab 栏 + 地址栏 + 收藏夹占用大量垂直空间)。

要想在移动端和电脑端都保持良好的交互体验太难了,我们参考了大量的 UI 设计,其中在 facebook 网页版、twitter 网页版、iPad、虎牙斗鱼网页 APP 版获取到很多想法:

  1. 多端设计中电脑端到手机端的跨越无法很好实现,其中最明显的就是导航栏差异太大,点击与触摸交互难以兼容,例如 Facebook 的电脑网页版到手机端 lite 版本,太多体验不一致,导致 lite 版本很鸡肋,但 twitter 就做的很好。
  2. 扁平化设计是必须的,不能有过多灰色、阴影过渡体现层次感,最多只能一层,否则移动端体验太差。

考虑再三我们决定参考 twitter 三段式的结构解决这个问题(可能是这个问题的唯一解),电脑端的交互体验类似 iPad,这样过渡到移动端较为方便,同时导航栏自由度高,可以用来实现工具栏,垂直空间利用充分。

分类系统

印象笔记的两级分类(笔记本 -> 笔记)在笔记数量较多的时候常常出现列表过长,难以找到相关笔记的问题,码道笔记采用文件树 + 置顶的形式(后续还将支持标签系统),管理笔记更加自由方便,如下图:

可以直接进入文件夹,也可以直接展开当前文件树,置顶文件优先显示,支持全局搜索,在文件夹页面、搜索页面都可以实现笔记编辑,多维度管理更加自由。

内容排版 what you see is what you get

印象笔记网页版不支持 markdown,app 版本需要分屏显示(大部分的 markdown 笔记产品都是分屏显示,如马克飞象、有道云笔记),分屏最大的缺点就是没有空间显示大纲栏了,长笔记无法很好跳转相应章节,使用体验还不如直接打开 IDE + git + onedrive。

为知笔记虽然是单屏,但采用编辑、预览切换的方法,实际使用需要重复切换,使用体验更差。码道笔记的编辑器是所见即所得的,单屏显示,编辑体验类似 typora,无需分屏,所写即所得。

在线网址:码道人,欢迎大家体验~

第一眼我还以为自己上了推特

Adek06 回复

哈哈 上文也提到了,多端兼容的问题,twitter 三段式无法避免

需要 登录 后方可回复, 如果你还没有账号请 注册新账号