一款在线 Markdown 编辑器,类似 typora 的编辑体验

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

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

叫什么名字

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

口号

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

最终效果

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

插入文本样式

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

插入代码块

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

插入数学公式

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

image

插入表格

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

自动排版检查(Markdown lint)

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

智能黏贴

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

源码编辑模式

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

图片插入无阻塞

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

image

响应式布局

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

image

实现细节

多端兼容之 Twitter 三段式

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

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

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

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

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

分类系统

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

image

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

内容排版 what you see is what you get

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容