摘要：更新歷史修復了無法導出中文文件的，增加了拖拽導入文件的功能。把編碼對象作為參數(shù)傳入，就可以生成一個可供下載的鏈接，下載的內容是完美的中文字符其他種類字符同樣支持，代碼如下保存為格式以上就是兩個關鍵新功能的實現(xiàn)原理。

項目地址：https://github.com/jrainlau/markcook
在線體驗：http://jrainlau.github.io/markcook/
客戶端下載：https://github.com/jrainlau/markcook/releases

使用了vue.js+webpack進行開發(fā)和構建。

非常的簡單，高效，沒有多余的東西。

她的優(yōu)點有很多：

實時預覽，所見即所得，無需擔心排版問題。

提供了齊全的快捷按鈕，無需查閱markdown語法即可進行排版。

完全離線的單頁應用，可以把gh-pages分支的文件clone下來，作為本地客戶端使用。

提供本地緩存功能，防止重要內容丟失。

拖拽導入文件，編輯本地文件方便快捷。

支持文件導出，編寫完畢可直接保存。

Markcook 1.2：修復了無法導出中文文件的bug，增加了拖拽導入文件的功能。

Markcook 1.1：增加了文件導出功能，可以導出.html或.md格式文件。

Markcook 1.0：基礎版本，僅有同步編譯markdown語法功能。

快捷插入markdown符號

拖拽上傳文件

緩存與下載

客戶端

距離1.0版本的推出已經(jīng)三個多月了，當時的1.0版本還是非常原始的，也沒打算繼續(xù)維護。后來在機緣巧合之下，覺得應該為它完善基本功能，起碼得支持導入導出吧。同時也因為臨近畢業(yè)，閑得慌，所以就把它重新拿出來，添加了一些實用的功能。

拖拽上傳主要使用了HTML5新增的file API，能夠讀取本地文件。通過file API，實現(xiàn)真正的backend free，不需要后臺也能夠上傳文件進行編輯了！具體代碼如下（包括拖拽上傳功能）：

--- html ---


--- javascript ---
(function () {
      var dropbox;
      dropbox = document.getElementById("inputter");
      dropbox.addEventListener("dragenter", dragenter, false);
      dropbox.addEventListener("dragover", dragover, false);
      dropbox.addEventListener("drop", drop, false);
      function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
      }

      function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
      }

      function drop(e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;

        var fileReader = new FileReader();
        fileReader.readAsText(files[0], "UTF-8");
        fileReader.onloadend = function (e) {
          console.log(e.target.result) // 輸出文件內容
        }
      }
    })()

為了提供文件導出功能，查了蠻多資料，也在sf社區(qū)提了問題：js生成的html模版如何提供下載？
感謝@cool_zjy 的回答，使用data URL確實是一種方式，但是最大的缺點是base64編碼不支持中文字符，若通過第三方庫轉碼，則下載的內容也是轉碼字符，不符合要求。后來經(jīng)過研究，采用了另外一個方法，也是HTML5提供的API，Blob()、URL.createObjectURL()。
Blob()接收一個數(shù)組作為參數(shù)，然后生成編碼對象。把編碼對象作為參數(shù)傳入URL.createObjectURL()，就可以生成一個可供下載的鏈接，下載的內容是完美的中文字符（其他種類字符同樣支持），代碼如下：

--- html ---
保存為.md格式

--- javascript（vue.js） ---
createUrl: function (mode) {
              var self = this
              var val = ""
              if (mode == 0) {
                val = self.article
                var blobObj = new Blob([val])
                var objectURL = URL.createObjectURL(blobObj)
                self.mdDataUrl = objectURL
              } else {
                val = self.outputHtml
                var blobObj = new Blob([val])
                var objectURL = URL.createObjectURL(blobObj)
                self.htmlDataUrl = objectURL
              }
            }

以上就是兩個關鍵新功能的實現(xiàn)原理。除了提供上傳與下載以外，HTML5的file API還有很多好玩強大的功能，值得深入研究。

最后通過electron打包，生成全平臺適用的桌面程序，在我的github release中已經(jīng)上傳了Windows 64位版本和OSX mas版本的，稍后將傳上OSX和Linux版本的。以下是Windows版截圖：

通過開發(fā)Markcook，我發(fā)現(xiàn)vuejs+webpack生成的項目非常適合通過electron移植為桌面應用，因為經(jīng)過webpack生成的vuejs項目只有一個index.html入口文件，其余均是js文件，只需要簡單地修改一下文件目錄結構，就可以通過electron直接生成桌面應用了，超級方便。在此感謝@遠程智力英雄 的文章從零開始使用Electron + jQuery開發(fā)桌面應用 （一） HelloWorld，很詳細地介紹electron的基本使用方法。

接下來看心情維護，可能會在后面調整LOGO和UI，因為現(xiàn)在其實挺簡陋的。同時因為懶，所以沒有做成響應式，以后重構再說……
如果覺得我的作品還可以的話，歡迎follow，也期待您的PR。雖然是一個簡單的作品，但仍希望能夠得到各位大牛的指點，謝謝大家！！