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

前幾個版本的地址：

https://www.cnblogs.com/liulun/p/7732415.html

https://www.cnblogs.com/liulun/p/5265636.html

https://www.cnblogs.com/liulun/p/4572822.html

https://www.cnblogs.com/liulun/p/4516625.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);
        };