為什么要開發(fā)一款新的編輯器
自從我開始使用 Markdown哑芹，就愛上了這種標記語法，輕量捕透、純文本兼容是最大的優(yōu)點聪姿，哪里都可以編輯，一開始是在 IDE 上直接編輯乙嘀，后來筆記越來越多末购，需要上傳圖片，有云同步乒躺、搜索的需求招盲，嘗試了 typora、有道云筆記嘉冒、印象筆記曹货、為知筆記后，發(fā)現(xiàn)各有個的缺點讳推，除了 typora 大多數(shù)都是左編輯右預覽的分屏模式顶籽，這對一個左撇子來說很難受，就像要我用右手拿剪刀裁剪一樣银觅，typora 是其中體驗最好的礼饱，無奈沒有在線版本，搜索究驴、云同步镊绪、圖片上傳功能無法實現(xiàn)（或者需要復雜的配置），想到很多人也有類似的痛點洒忧，于是拉起團隊打算搞在線版的 markdown 編輯器蝴韭，目標是要達到 typora 類似的編輯體驗，甚至更好熙侍。
叫什么名字
給一個產(chǎn)品起名字確實是很困難的事榄鉴，既要國際化又要本地化，還得深度結(jié)合產(chǎn)品（比如知乎蛉抓、百度中文含義深庆尘，但域名直接使用拼音也決定了產(chǎn)品國際化的困難），日思夜想巷送，無意間想到 markdowner 這個名字驶忌，er 后綴結(jié)尾有特定人群的意思，如 follower惩系，lover位岔，中文名可以直接取自發(fā)音：碼道人如筛。碼是代碼的碼，意思是編程道路上的人抒抬。nice ! 中文有深意同時解決國際化本地化的難題杨刨。
口號
碼道人，開發(fā)者最好的朋友：Markdowner is coder‘s best friend.
最終效果
:grin: 先給大家看看效果擦剑，滿足好奇心
插入文本樣式
所見即所得妖胀，無需使用鼠標和工具欄，正常的 markdown 輸入即可得到您想要的樣式惠勒，全兼容 markdown 語法赚抡，沒有任何輸入負擔，讓您更專注于內(nèi)容創(chuàng)作纠屋。插入代碼塊
快捷輸入涂臣、支持多種語言、自動語法高亮售担、tab 鍵自動轉(zhuǎn)換為空格赁遗，類似 IDE 的編輯體驗插入數(shù)學公式
支持 Latex 語法的數(shù)學公式，$$ + enter 快捷插入族铆，一邊編輯一邊預覽岩四，高效簡潔
插入表格
全功能的表格編輯體驗，避免手動輸入字符排版哥攘，支持對齊剖煌、插入、刪除逝淹，簡潔實用高效耕姊。自動排版檢查（Markdown lint）
自動檢查常見排版錯誤，比如代碼塊中的 tab 鍵栅葡、不連續(xù)的標題跨越箩做、標點符號前空格等，可以查看錯誤信息妥畏，雙擊提示按鈕可自動修復錯誤，幫助排版出更漂亮的文檔安吁。智能黏貼
可以直接黏貼來自編輯器或其他網(wǎng)頁的內(nèi)容醉蚁，自動轉(zhuǎn)換為 markdown 格式，無需再次手工排版鬼店。源碼編輯模式
隨時可切換到源碼編輯模式网棍，復制黏貼原始 markdown 文檔，兩個編輯器的數(shù)據(jù)是同步且兼容的妇智。圖片插入無阻塞
支持直接拖動上傳滥玷，操作更加方便氏身，可在上傳圖片的同時編輯其他區(qū)域的文字，無需等待圖片上傳完成惑畴，編輯無阻塞蛋欣。
響應式布局
全站響應式布局，兼容 Paid 和移動端顯示如贷，支持分屏顯示陷虎，避免頻繁切換窗口，邊看資料邊記錄杠袱，關(guān)注點分離尚猿，全程無阻塞。
實現(xiàn)細節(jié)
多端兼容之 Twitter 三段式
現(xiàn)在移動端用戶越來越多楣富，網(wǎng)頁多端兼容是必須的凿掂，如此一來必須解決一個世界性的 UI 難題：
移動端水平空間不足、電腦端垂直空間不足（系統(tǒng)任務欄+瀏覽器tab欄+地址欄+收藏夾占用大量垂直空間）纹蝴。
要想在移動端和電腦端都保持良好的交互體驗太難了庄萎，我們參考了大量的 UI 設計，其中在facebook 網(wǎng)頁版骗灶、 twitter 網(wǎng)頁版惨恭、iPad、虎牙斗魚網(wǎng)頁APP版獲取到很多想法：
- 多端設計中電腦端到手機端的跨越無法很好實現(xiàn)耙旦，其中最明顯的就是導航欄差異太大脱羡，點擊與觸摸交互難以兼容，例如 Facebook 的電腦網(wǎng)頁版到手機端 lite 版本免都，太多體驗不一致锉罐，導致 lite 版本很雞肋，但 twitter 就做的很好绕娘。
- 扁平化設計是必須的脓规，不能有過多灰色、陰影過渡體現(xiàn)層次感险领，最多只能一層侨舆，否則移動端體驗太差。
考慮再三我們決定參考 twitter 三段式的結(jié)構(gòu)解決這個問題（可能是這個問題的唯一解）绢陌，電腦端的交互體驗類似 iPad挨下，這樣過渡到移動端較為方便，同時導航欄自由度高脐湾，可以用來實現(xiàn)工具欄臭笆，垂直空間利用充分。
分類系統(tǒng)
印象筆記的兩級分類（筆記本 -> 筆記）在筆記數(shù)量較多的時候常常出現(xiàn)列表過長，難以找到相關(guān)筆記的問題愁铺，碼道筆記采用文件樹 + 置頂?shù)男问剑ê罄m(xù)還將支持標簽系統(tǒng)）鹰霍，管理筆記更加自由方便，如下圖：
可以直接進入文件夾茵乱，也可以直接展開當前文件樹茂洒，置頂文件優(yōu)先顯示，支持全局搜索似将，在文件夾頁面获黔、搜索頁面都可以實現(xiàn)筆記編輯，多維度管理更加自由在验。
內(nèi)容排版 what you see is what you get
印象筆記網(wǎng)頁版不支持 markdown玷氏，app 版本需要分屏顯示（大部分的 markdown 筆記產(chǎn)品都是分屏顯示，如馬克飛象腋舌、有道云筆記）盏触，分屏最大的缺點就是沒有空間顯示大綱欄了，長筆記無法很好跳轉(zhuǎn)相應章節(jié)块饺，使用體驗還不如直接打開 IDE + git + onedrive赞辩。
為知筆記雖然是單屏，但采用編輯授艰、預覽切換的方法辨嗽，實際使用需要重復切換，使用體驗更差淮腾。碼道筆記的編輯器是所見即所得的糟需，單屏顯示，編輯體驗類似 typora谷朝，無需分屏洲押，所寫即所得。
在線網(wǎng)址：碼道人圆凰，歡迎大家體驗～
