SimpleMarkdown - 一款簡單的Markdown編輯器

源碼地址： https://github.com/zhuangZhou/SimpleMarkdown

預覽地址： http://hawkzz.com:8000

作者網站：http://hawkzz.com

簡介

這是一款基於NodeJs開發的簡單的Markdown編輯器，其UI是仿照簡書的Markdown編輯器；主要功能：實時解析，實時保存，實時預覽，全屏等

預覽

技術棧

• NodeJs
• Express
• Swig
• Marked
• highJs
• Jquery

實時解析、保存

經常使用簡書的Markdown編輯器書寫博客，它的有點很明顯，一是，可以實時保存，二是，可以實時解析；因為自己想做個個人網站，其中就有書寫博客功能，考慮過使用已經目前很成熟的富文本編輯器，比如：ueditor編輯器；但是感覺這些編輯器都太過於龐大，於是，就有了自己寫一個編輯器的念頭，說干就干；研究了簡書的Markdown編輯器的工作原理，它是怎么實現實時保存和解析的；然后開始了自己的構思。

想要實時保存，就需要不斷的給后台傳輸數據，那么是以什么頻率去給后台傳輸數據呢？以什么樣的形式去保存呢，是直接保存在數據庫，還是保存在一個文件里面呢？

首先，是第一個問題，既然是實時保存，所以我這里是以每輸入一個字符，就開始實時保存，這樣的一個缺點就是請求次數太多，如果各位有什么好建議，請拍磚；

然后，是第二個問題，我這里是通過把標題寫在一個數組里（當然在實際項目中這是寫在數據庫里的，這里只是不想開數據庫，所以使用數組），文章放在一個文件里，通過標題（或數據庫標識）來查詢文章；

下面為主要的NodeJs后台代碼

router.post('/save', (req, res) => {
    //獲取數據
    let title = req.body.title;
    let markdown = req.body.markdown;
    let change = Number.parseInt(req.body.change);

    let html = `# ${title} # \n ${markdown}`;

    fs.exists('./docs/' + title + '.md', (exists) => {
        console.log(exists);
        if (!exists) {
            console.log(change);
            if (change === 1) {
                let oldTitle = req.body.oldTitle;
                fs.unlink('./docs/' + oldTitle + '.md', (err) => {
                    if (err) {
                        return console.error(err);
                    }
                    titleArr.forEach((item, index) => {
                        if (item === oldTitle) {
                            titleArr.splice(index, 1, title);
                        }
                    })
                    console.log('刪除成功!');
                });
            } else {
                titleArr.splice(0, 0, title);
                console.log(titleArr);
            }
        }
    });

    //寫入文件
    let writeStream = fs.createWriteStream('./docs/' + title + '.md');
    writeStream.write(markdown);
    writeStream.end();

    writeStream.on('finish', () => {
        console.log('寫入完成');
    });

    //傳遞數據
    let data = {};
    data.html = marked(html);
    res.json(data);
});

前台代碼：

//實時保存解析文檔
function transformMd() {
    var markdown = $('#editArea').val();
    var title = $('#markTitle').val();
    var oldTitle = $('#markTitle').attr('data-old');
    var change = 0;
    if (oldTitle != undefined && title != oldTitle) {
        change = 1;
    }
    $.post('/save', {
        markdown: markdown,
        title: title,
        oldTitle: oldTitle,
        change: change
    }, function (res) {
        $('.right').html(res.html);
        $('#markTitle').attr('data-old', title);
        $('pre code').each(function (i, block) {
            hljs.highlightBlock(block);
        });
    }, 'json');
}

后記

這篇博客只是介紹了核心功能，其余的感覺無需多介紹，需要了解的可以看源碼，都有注釋，多多諒解！！！

目前只是實現了新建文檔和實時解析，實時保存以及一些基本功能，還有一些構思沒有實現，比如：上傳文檔解析；敬請期待！！！