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

項(xiàng)目地址：https://github.com/jrainlau/markcook
在線體驗(yàn)：http://jrainlau.github.io/markcook/
客戶端下載：https://github.com/jrainlau/markcook/releases

使用了vue.js+webpack進(jìn)行開發(fā)和構(gòu)建。

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

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

實(shí)時(shí)預(yù)覽，所見即所得，無需擔(dān)心排版問題。

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

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

提供本地緩存功能，防止重要內(nèi)容丟失。

拖拽導(dǎo)入文件，編輯本地文件方便快捷。

支持文件導(dǎo)出，編寫完畢可直接保存。

Markcook 1.2：修復(fù)了無法導(dǎo)出中文文件的bug，增加了拖拽導(dǎo)入文件的功能。

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

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

快捷插入markdown符號

拖拽上傳文件

緩存與下載

客戶端

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

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

--- 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) // 輸出文件內(nèi)容
        }
      }
    })()

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

--- 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
              }
            }

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

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

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

接下來看心情維護(hù)，可能會(huì)在后面調(diào)整LOGO和UI，因?yàn)楝F(xiàn)在其實(shí)挺簡陋的。同時(shí)因?yàn)閼校詻]有做成響應(yīng)式，以后重構(gòu)再說……
如果覺得我的作品還可以的話，歡迎follow，也期待您的PR。雖然是一個(gè)簡單的作品，但仍希望能夠得到各位大牛的指點(diǎn)，謝謝大家！！