Markcook 1.2，超轻的开源markdown编辑器

2019年8月30日 147次阅读 来源: jrainlau

Markcook 1.2

《Markcook 1.2，超轻的开源markdown编辑器》

项目地点：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标记
    《Markcook 1.2，超轻的开源markdown编辑器》

  • 拖拽上传文件
    《Markcook 1.2，超轻的开源markdown编辑器》

  • 缓存与下载
    《Markcook 1.2，超轻的开源markdown编辑器》

  • 客户端
    《Markcook 1.2，超轻的开源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 1.2，超轻的开源markdown编辑器》

经由过程开辟Markcook，我发明vuejs+webpack天生的项目异常合适经由过程electron移植为桌面运用，由于经由webpack天生的vuejs项目只要一个index.html进口文件，其他均是js文件，只需要简朴地修正一下文件目次构造，就可以经由过程electron直接天生桌面运用了，超等轻易。在此感谢@长途智力好汉 的文章从零开始运用Electron + jQuery开辟桌面运用 （一） HelloWorld，很细致地引见electron的基础运用要领。

写在末了

接下来看心境保护，可能会在后面调解LOGO和UI，由于如今实在挺大略的。同时由于懒，所以没有做成相应式，今后重构再说……
假如以为我的作品还可以的话，迎接follow，也期待您的PR。虽然是一个简朴的作品，但仍愿望可以获得列位大牛的指导，感谢人人！！

    原文作者：jrainlau
    原文地址: https://segmentfault.com/a/1190000004938777
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞