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符号
    快捷插入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。虽然是一个简单的作品,但仍希望能够得到各位大牛的指点,谢谢大家!!

阅读 10.7k

推荐阅读
Jrain-前端玩具盆
用户专栏

记录一路以来的各种折腾。

6277 人关注
68 篇文章
专栏主页