博客园文章编辑器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);
};
