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


Jrain-前端玩具盆
记录一路以来的各种折腾。

Hiphop dancer,

12.9k 声望
11.6k 粉丝
0 条评论
推荐阅读
浅谈组件库和 SVG 图标库的解耦维护思路
任何的前端组件库,无论是业界内有名的 tdesign,ant-design 还是 element-ui 也好,它们都有着自己的一系列图标。经过观察发现,这些图标都是在组件库发布的时候就已经基本稳定了,鲜有调整,所以可以一直存放于...

jrainlau1阅读 1.7k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 12k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

Hiphop dancer,

12.9k 声望
11.6k 粉丝
宣传栏