博客園文章編輯器5.0版本發佈（markdown版）

前幾個版本的地址：

http://www.javashuo.com/article/p-bwzeewpi-dg.html

http://www.javashuo.com/article/p-ylgomgze-ck.html

http://www.javashuo.com/article/p-uecqrztc-bv.html

http://www.javashuo.com/article/p-ytfejgea-dm.html

注意：使用本軟件前，需先在博客園後臺設置默認編輯器爲markdown

開篇

廢話少說，先上界面圖片：

10月25日，我發佈了博客園文章編輯器的4.0版本，獲得了不少朋友的支持，

（後來我本身發現了一些問題，因而偷偷發了博客園文章編輯器的4.0.1版本，也沒通知你們，不過好在有自動升級功能）

當時有不少朋友問我，這個工具支持不支持markdown，

我以爲寫markdown的人仍是挺多的，

調查了博客園確實支持markdown編輯器，

並且我開發了markdown的編輯器，對於那些使用HTML富文本編輯器的用戶來講，也很容易上手，沒太大改變，

還能使他們經過個人編輯器學習一點markdown的語法知識，何樂而不爲呢？！

調研

說實話，我確實低估了開發這個東西的難度

本打算到github上隨便拉一個來，

嵌到nwjs裏去就能夠了，

然而看了幾個高分項目，都不合我意。

（不過，說真心話仍是要感謝這些項目，我寫這個工具參考了不少這些開源項目的源碼）

我以爲這個項目最主要的難點是：

• 找一個合適的編輯器
• 編輯窗口與預覽窗口滾動條同步
• 和博客園官網通訊通道打通

好在這些難點我都克服了

如今你看到的東西，就是這一陣子斷斷續續努力的成果

功能

這裏羅列的是全部的我以爲重要的功能

• 兩欄佈局，左邊欄編寫markdown內容，右邊欄實時預覽；
• 左右兩邊欄滾動條同步滾動
• 容許用戶拖拽調整左右兩邊欄寬度
• 支持最基本的markdown語法（連接、表格、標題、加粗、斜體、引用、有序無序列表，代碼、橫線等）
• 博客登陸（引入博客園的登陸畫面，使用官方提供的登陸機制）
• 檢索歷史文章（能夠檢索到你博客園內全部的隨筆文章，支持分頁）
• 修改文章（你博客園內全部的歷史隨筆文章，均可以用此工具編輯修改）
• 新增文章（從無到有撰寫一篇新的隨筆文章，默認保存爲草稿）
• 截圖工具截圖後直接黏貼到編輯器中（圖片保存在博客園的服務器上）
• 純客戶端，直接與博客園服務端通訊
• 純綠色版，不須要安裝，沒有額外的服務，體積更小；
• 自動升級功能（我發佈新版本以後，會提示您升級）；
• 最最關鍵的仍是開源！（照着這個代碼寫個淘寶下單器之類的東西，簡直易如反掌）
• 相對於上一個版本，作了一些UI/UE美化工做；

開源

開源地址：https://gitee.com/xland/cnblogs

下載地址：https://gitee.com/xland/cnblogs/releases

支持

強烈但願你們能給個star；

這讓我知道你在用；

這讓我有動力繼續作一些對你們有用的東西；

關鍵源碼

第一段代碼是用於控制滾動條同步滾動的：

var editorScroll = function () {
                setTimeout(function () {
                    if (rightScrolling) {
                        return;
                    }
                    var scrollInfo = editor.getScrollInfo();
                    var lineNumber = editor.lineAtHeight(scrollInfo.top, 'local');
                    var range = editor.getRange({ line: 0, ch: null }, { line: lineNumber, ch: null });
                    var parser = new DOMParser();
                    var doc = parser.parseFromString(marked(range), 'text/html');
                    var topLineIndex = doc.body.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, pre, blockquote, hr, table').length;
                    var eles = document.getElementById("right").querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, pre, blockquote, hr, table');
                    var scTop = eles[topLineIndex].offsetTop;
                    $(".right").scrollTop(scTop);
                }, 800)
            }
editor.on("scroll", editorScroll);

第二段代碼，是用於插入markdown特有語法符號的

var wrapWidth = function (start, end) {
            if (!end) {
                end = start;
            }
            var arr = editor.doc.getSelections();
            var result = [];
            arr.forEach(item => {
                var tempArr = item.split('\n');
                for (var i = 0; i < tempArr.length; i++) {
                    if (tempArr[i]) {
                        tempArr[i] = start + tempArr[i] + end;
                    }
                }
                result.push(tempArr.join('\n'));
            })
            editor.doc.replaceSelections(result);
        };