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。虽然是一个简单的做品，但仍但愿可以获得各位大牛的指点，谢谢你们！！