Markcook 1.2，超輕的開源markdown編輯器

Markcook 1.2

---

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

---

介紹

Markcook 1.2--簡潔、高效的markdown編輯器

---

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

很是的簡單，高效，沒有多餘的東西。

她的優勢有不少：

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

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

• 徹底離線的單頁應用，能夠把gh-pages分支的文件clone下來，做爲本地客戶端使用。

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

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

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

更新歷史

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

• Markcook 1.1：增長了文件導出功能，能夠導出.html或.md格式文件。

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

---

功能展現

• 快捷插入markdown符號
  

• 拖拽上傳文件
  

• 緩存與下載
  

• 客戶端
  

開發過程

距離1.0版本的推出已經三個多月了，當時的1.0版本仍是很是原始的，也沒打算繼續維護。後來在機緣巧合之下，以爲應該爲它完善基本功能，起碼得支持導入導出吧。同時也由於臨近畢業，閒得慌，因此就把它從新拿出來，添加了一些實用的功能。

拖拽上傳主要使用了HTML5新增的file API，可以讀取本地文件。經過file API，實現真正的backend free，不須要後臺也可以上傳文件進行編輯了！具體代碼以下（包括拖拽上傳功能）：

--- html ---
<textarea autofocus id="inputter" v-model="article"></textarea>

--- 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社區提了問題：js生成的html模版如何提供下載？
感謝@cool_zjy 的回答，使用data URL確實是一種方式，可是最大的缺點是base64編碼不支持中文字符，若經過第三方庫轉碼，則下載的內容也是轉碼字符，不符合要求。後來通過研究，採用了另一個方法，也是HTML5提供的API，Blob()、URL.createObjectURL()。
Blob()接收一個數組做爲參數，而後生成編碼對象。把編碼對象做爲參數傳入URL.createObjectURL()，就能夠生成一個可供下載的連接，下載的內容是完美的中文字符（其餘種類字符一樣支持），代碼以下：

--- html ---
<a :href='mdDataUrl' download="index.md" @mouseenter='createUrl(0)'>保存爲.md格式</a>

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

以上就是兩個關鍵新功能的實現原理。除了提供上傳與下載之外，HTML5的file API還有不少好玩強大的功能，值得深刻研究。

最後經過electron打包，生成全平臺適用的桌面程序，在個人github release中已經上傳了Windows 64位版本和OSX mas版本的，稍後將傳上OSX和Linux版本的。如下是Windows版截圖：

經過開發Markcook，我發現vuejs+webpack生成的項目很是適合經過electron移植爲桌面應用，由於通過webpack生成的vuejs項目只有一個index.html入口文件，其他均是js文件，只須要簡單地修改一下文件目錄結構，就能夠經過electron直接生成桌面應用了，超級方便。在此感謝@遠程智力英雄 的文章從零開始使用Electron + jQuery開發桌面應用 （一） HelloWorld，很詳細地介紹electron的基本使用方法。

寫在最後

接下來看心情維護，可能會在後面調整LOGO和UI，由於如今其實挺簡陋的。同時由於懶，因此沒有作成響應式，之後重構再說……若是以爲個人做品還能夠的話，歡迎follow，也期待您的PR。雖然是一個簡單的做品，但仍但願可以獲得各位大牛的指點，謝謝你們！！