Logdown 開發經驗談 - Codemirror 的應⽤

Transcript

1. Logdown 開發經驗談 Codemirror 的應⽤用 13年8月5⽇日星期⼀一
2. Logdown.com 13年8月5⽇日星期⼀一
3. Logdown.com • 24h Hackathon 作品 • Alexa TW 500 in 40 days • 3k users • 5w posts 13年8月5⽇日星期⼀一
4. Logdown.com • Github Flavored Markdown • Code highlight • MathJax • Octopres / Wordpress / Tumblr / Blogger / MT importing / exporting • Custom Domain & Custom URL. Keep it compatible with old blogs 13年8月5⽇日星期⼀一
5. Codemirror Editor 13年8月5⽇日星期⼀一
6. 13年8月5⽇日星期⼀一
7. Codemirror? 13年8月5⽇日星期⼀一
8. Real-world uses In-browser Code Editor 幾乎都可以未看先猜是 Codemirror 13年8月5⽇日星期⼀一
9. 為何需要專⼼心的寫作環境？ 13年8月5⽇日星期⼀一
10. 今天的主題-理想的圖⽚片上傳 如何讓上傳圖⽚片不影響寫作的流暢度 13年8月5⽇日星期⼀一
11. 原始的圖⽚片上傳 ⼀一次只能上傳⼀一張 上傳完必須⼿手動插⼊入 上傳時不能同時寫⽂文章 13年8月5⽇日星期⼀一
12. 理想的上傳圖⽚片 • 直覺的 Drag & Drop • 可同時寫作和上傳圖⽚片 • 圖⽚片可以插到⽂文章任何位置 • 可以同時傳送多張 13年8月5⽇日星期⼀一
13. 如何實現？ • 偵測滑⿏鼠在 editor 的哪⼀一⾏行 • 必須在⾏行間插⼊入DIV，且不影響⽂文章內容 • 上傳時顯⽰示進度，上傳完回傳網址 13年8月5⽇日星期⼀一
14. 1.偵測滑⿏鼠在哪⼀一⾏行 13年8月5⽇日星期⼀一
15. 1.偵測滑⿏鼠在哪⼀一⾏行 傳⼊入滑⿏鼠座標 回傳⾏行數 13年8月5⽇日星期⼀一
16. 2.插⼊入Line widget 13年8月5⽇日星期⼀一
17. 2.插⼊入Line widget 在⾏行下插⼊入⼀一個div，且不影響該⾏行 13年8月5⽇日星期⼀一
18. 2.插⼊入Line widget 指定⾏行數 插⼊入DIV 13年8月5⽇日星期⼀一
19. 3.上傳, 顯⽰示進度,插⼊入圖⽚片 13年8月5⽇日星期⼀一
20. 3.上傳, 顯⽰示進度,插⼊入圖⽚片 13年8月5⽇日星期⼀一
21. 上傳成功，回傳網址，插⼊入⽂文章 上傳中，回傳進度 3.上傳, 顯⽰示進度,插⼊入圖⽚片 13年8月5⽇日星期⼀一
22. 美化UI • 感謝神之⼿手主席 13年8月5⽇日星期⼀一
23. 美化UI 藍底⽩白字 灰底藍字 13年8月5⽇日星期⼀一
24. 組合起來 • 偵測滑⿏鼠抓到⾏行數 • 使⽤用⾏行數插⼊入 Line widget • 上傳中，把上傳進度⽤用 Linewidget 顯⽰示 • 上傳成功，插⼊入⽂文章，刪除 Linewidget • 交給⾦金⼿手指主席美化 13年8月5⽇日星期⼀一
25. Live Demo 13年8月5⽇日星期⼀一
26. Logdown.com 歡迎試⽤用 13年8月5⽇日星期⼀一
27. 謝謝！ 13年8月5⽇日星期⼀一