Markdown在线预览

Markdown在线预览上线了，拖动文件或者点击上传markdown文件就可以预览了。
服务器不保存文件副本，只是将上传的文件内容转换为html格式显示在网页上。

点击地址访问：3inns.cn/mdviewer

前端实现

支持拖拽和点击打开文件夹选择文件的方式

html代码

<div id="content">    <div id="dropbox">      <h1>Drop file here or click to upload</h1>      <h3>(The server does not keep a copy)</h3>      <h4 id="tips"></h4>    </div>    <div id="result"></div>    <input type="file" id="inputfile" name="file" style="display:none"/> </div>

js代码

<script>      var dropbox = document.getElementById("dropbox");          dropbox.addEventListener("click", openfile, false);      dropbox.addEventListener("dragenter", dragenter, false);          dropbox.addEventListener("dragover", dragover, false);          dropbox.addEventListener("drop", drop, false);        $('#inputfile').change(function() { upload($('#inputfile').get(0).files); })      function openfile(e) { $('#inputfile').click(); }      function dragenter(e) { e.stopPropagation(); e.preventDefault(); }      function dragover(e) { e.stopPropagation(); e.preventDefault(); }      function drop(e) { e.stopPropagation(); e.preventDefault(); upload(e.dataTransfer.files); }      var tips = $('#tips');      function upload(files) {        if (files === undefined) {          return;        }        if (files.length !== 1) {          tips.text('Tips:Only one file can be uploaded.');          return;        }        var fileObj = files[0];        if (fileObj.size > 5 * 1024 * 1024) {          tips.text('Tips:No more than 5M.');          return;        }        var FileController = "../mdfile"; // 接收上传文件的后台地址         var form = new FormData();        form.append("author", "3inns.cn");        form.append("file", fileObj); // 文件对象        var xhr = new XMLHttpRequest();        xhr.open("post", FileController, true);        xhr.onload = function (e) {            console.log('over');        };        xhr.onreadystatechange = function() {          $('#dropbox').hide();          $('#result').html(xhr.responseText);        }        xhr.upload.addEventListener("progress", function(evt) {          if (evt.lengthComputable) {            var percentComplete = Math.round(evt.loaded * 100 / evt.total);            console.log(percentComplete);            tips.text('Tips:' + percentComplete + '%');          } else {            tips.text('Upload failed!');          }        }, false);        xhr.send(form);      }    </script>

后台实现

使用的是koa2

引入koaBody模块

const koaBody = require('koa-body');...app.use(koaBody({ multipart: true }))

路由以及实现

使用marked模块转换markdown文本为html格式

app.use(route.get('/mdviewer', Extends.mdviewer))app.use(route.post('/mdfile', Extends.mdfile))// Extends对象module.exports.mdviewer = async function(ctx) {    ctx.body = await ctx.render('md_viewer');}const readFilePromise = (path) => {    return new Promise((resolve, reject) => {        fs.readFile(path, 'utf8', (err, data) => {            if (err) {                return reject();            }            return resolve(data);        })    })}module.exports.mdfile = async function(ctx, next) {  if ('POST' != ctx.method) {      return await next();  }  if (ctx.request.body.files && ctx.request.body.files.file) {    const author = ctx.request.body.fields.author;    const file = ctx.request.body.files.file;    const content = await readFilePromise(file.path);    if (content && content.length) {        const html = marked(content);        ctx.body = html;    } else {        return await next();    }  } else {      return await next();  }}

代码不多实现起来也不复杂，暂时没考虑各浏览器的兼容性问题，相信大家用的都是新版浏览器。