Markcook 1.2, Ultralight Open Source markdown Editor

  html5, javascript, markdown, vue.js, webpack

Markcook 1.2

替代文字


Project address:https://github.com/jrainlau/markcook
Online experience:http://jrainlau.github.io/markcook/
Client download:https://github.com/jrainlau/markcook/releases


Introduction

Mark Cook1.2-Simple and Efficient markdown Editor


Vue.js+webpack.

It’s very simple, efficient and has nothing to spare.

She has many advantages:

  • Live preview, WYSIWYG, no need to worry about typesetting.

  • A complete set of shortcut buttons are provided, and typesetting can be carried out without consulting markdown syntax.

  • For a single-page application that is completely offline, the file clone of gh-pages branch can be downloaded and used as a local client.

  • Provides local caching to prevent loss of important content.

  • Drag and drop imported files to edit local files conveniently and quickly.

  • File export is supported and can be saved directly after writing.

Update history

  • Markcook 1.2: Fixed a bug that could not export Chinese files and added the function of dragging and dropping imported files.

  • Markcook 1.1: File export function is added to export.htmlOr.mdFormat file.

  • Markcook 1.0: Basic version, only capable of synchronously compiling markdown syntax.


Function display

  • Quick Insert markdown Symbol
    快捷插入markdown符号

  • Drag and drop upload file
    拖拽上传文件

  • Caching and Downloading
    缓存与下载

  • Client
    图片描述

development process

It has been more than three months since the release of version 1.0. At that time, version 1.0 was still very original and did not intend to continue maintenance. Later, by chance, I felt that I should improve the basic functions for it, at least I have to support import and export. At the same time, as graduation was approaching and I was too busy, I took it out again and added some practical functions.

Drag and drop upload mainly uses the file API newly added in HTML5, which can read local files. Through file API, the real backend free can be realized, and files can be uploaded for editing without backstage! The specific code is as follows (including drag and drop upload function):

--- 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) ///output file contents
 }
 }
 })()

In order to provide the file export function, I checked a lot of data and also asked questions in sf community:How can html templates generated by js be downloaded?
Thank@cool_zjyHowever, the biggest drawback is that base64 encoding does not support Chinese characters. If transcoding is done through a third-party library, the downloaded content is also transcoded characters, which does not meet the requirements. Later, after research, another method, also an API provided by HTML5, was adopted.Blob()URL.createObjectURL().
Blob()Receives an array as a parameter and generates an encoded object. Pass in the encoded object as a parameterURL.createObjectURL(), you can generate a link that can be downloaded. The downloaded content is perfect Chinese characters (other types of characters are also supported). The code is as follows:

--- html ---
 < a: href =' mddataurl' download = "index.md" @ mouseenter =' createurl (0)' > save in. md format < /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
 }
 }

These are the implementation principles of the two key new functions. In addition to providing uploading and downloading, the file API of HTML5 has many interesting and powerful functions, which deserve further study.

Finally, through electron packaging, desktop programs suitable for the whole platform are generated. in my github release, the 64-bit version of windows and OSX mas version have been uploaded.The OSX and Linux versions will be uploaded later.. The following is a screenshot of the Windows version:
图片描述

Through the development of Markcook, I found that the vuejs+webpack generated project is very suitable for desktop application migration through Electronics, because the vuejs project generated through webpack has only one index.html entry file and the rest are js files. It is extremely convenient to directly generate desktop application through Electronics by simply modifying the file directory structure. Thank you here@ Remote Intelligence HeroThe articleDeveloping Desktop Applications from scratch with Electron+jQuery (1) HelloWorld, introduces the basic usage of electron in detail.

Write at the end

Next, looking at mood maintenance, I may adjust LOGO and UI later, because it is quite crude now. At the same time, because of laziness, I didn’t make a response. I’ll reconstruct it later.
If you think my work is ok, welcome follow and look forward to your PR. Although it is a simple work, I still hope to get your advice, thank you! !