用nw.js開發markdown編輯器-已完成功能介紹
- 1. 功能列表
- 2. 基本markdown語法
- 3. 自動更新
- 4. 實時預覽窗口
- 5. 樣式選擇與自定義
- 6. 云存儲配置
- 7. 自動上傳圖片
- 8. 一鍵文檔分享
- 9. emoji表情功能.
- 10. 導出html,pdf文件功能.
- 11. 目錄語法
- 12. 備注 </ol> </div>
- 基本markdown語法
- 自動更新.
- 實時預覽窗口
- 編輯器,預覽,代碼段樣式選擇和自定義
- 自動上傳圖片
- emoji表情.
- 導出html,pdf文件.
- 目錄語法
- 一鍵文檔分享
做這個markdown編輯器是因為自己平常用markdown寫文檔寫得比較多,網上找的都不太好用,而且都不支持擴展開發,無法實現自己所需的一些定制化功能.
從今年四月份開始,陸陸續續的利用一些零碎時間做到現在,所需的基本功能都實現了,因此現在寫一篇總結把功能介紹一遍.
這個編輯器的主要特色是自動上傳圖片,文檔分享以及導出pdf
功能列表
基本markdown語法
Markdown 是一種輕量級標記語言，創始人為約翰·格魯伯（John Gruber）。它允許人們“使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的XHTML(或者HTML)文檔”。 —— 維基百科
本編輯器的markdown語法基于github的GitHub Flavored Markdown擴展出更多語法,因此基本的語法直接看Github的 幫助文檔
自動更新
目前提供最新版的下載地址是 v1.0.0.0
第一次使用請直接下載,以后只要點擊右上角的 
按鈕就會檢查更新,如果有新版本,則會提示是否要更新.
實時預覽窗口
系統設置里提供兩種方式的預覽窗口選擇,如圖
.
雙屏幕的用戶可以選擇在新窗口打開預覽. 編寫文檔時,預覽窗口會實時的更新并滾動到當前編輯位置.
預覽窗口可使用 
按鈕切換開關.
樣式選擇與自定義
如圖,可以選擇編輯器樣式和預覽窗口樣式以及預覽窗口里的代碼段樣式.軟件預設了一些樣式供選擇,用戶也可以直接編輯樣式文件自定義.這3個樣式存放的目錄分別在軟件app目錄下的:
編輯器樣式: app\lib\codemirror\theme
預覽樣式目錄: \app\css\previewtheme
代碼段樣式目錄: app\node_modules\highlight.js\styles
可以直接修改里面已有的樣式,也可以直接新增文件,下拉菜單會自動讀取所有樣式文件供選擇.
云存儲配置
由于自動上傳圖片和一鍵文檔分享需要用到云存儲(目前用的是七牛),因此這里先講下系統設置里的云存儲設置.
首先得注冊一個 七牛帳號 .
進入后臺,新建二個共享空間,一個用于存儲圖片,另一個存儲共享文檔(其實也可以用同一個,看個人習慣)
選擇新建的空間,點擊空間設置>域名設置,查看自動分配的域名
回到后臺首頁,點擊賬號設置,可以查看accessKey(AK)和SecretKey(SK)
在系統設置里配置好這幾個字段
我把我空間的密鑰遮住了,大家請填上自己的空間密鑰
自動上傳圖片
將圖片復制到剪貼板后(如qq截圖,系統截屏等),直接在編輯器里粘貼圖片,會自動將圖片上傳到配置好的七牛空間里.并在編輯器里填入markdown格式的圖片引用,如圖
圖片名稱是隨機生成的(目前這樣的話,用久了圖片很亂,暫時想不到什么好辦法可以不犧牲易用性,又方便分類管理圖片).我博客里所有圖片都是這樣的,寫起博客來特方便.
一鍵文檔分享
如果文檔里有此格式的標簽[SHARE:文件名].
則點擊 
按鈕時,會自動將文檔解析成html,并上傳到配置好的文檔空間,然后在瀏覽器打開.文件名為標簽里指定的文件名.
emoji表情功能.
目前支持 此表格 里的所有emoji表情.
只要在寫文檔時,以這種格式:表情代號:,就會被解析為對應emoji表情.如下面這些表情.
:+1: :shit: :-1: :point_right::ok_hand:
表情代號在上面的表格里查詢
導出html,pdf文件功能.
點擊 
可以導出解析好的文檔到html或者pdf文件.導出哪種類型,取決于你輸入的后綴名(如果為pdf,則導出時需要等待幾秒)
目錄語法
文檔里如果帶有TOC標簽
[TOC]則會自動將h1~h6標簽按嵌套結構解析為目錄樹,并替換顯示在TOC標簽位置