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。虽然是一个简单的作品，但仍希望能够得到各位大牛的指点，谢谢大家！！