be careful : Before using the software , You need to set the default editor to markdown

Opening

Talk less nonsense , Interface picture first :




10 month 25 day , I published the blog Garden article editor's 4.0 edition <http://www.cnblogs.com/liulun/p/7732415.html>
, With the support of many friends ,

( And then I found some problems myself , So I secretly sent the blog Garden article editor's 4.0.1 edition , I didn't let you know , But it's good that there's an automatic upgrade )

At that time, many friends asked me , This tool does not support markdown,

I think writing markdown There are still a lot of people ,

I investigated the blog park's support markdown editor ,

And I developed markdown Editor for , For those using HTML For users of rich text editor , It's easy , No big change ,

It also enables them to learn a little from my editor markdown Grammar knowledge of , Why not ?!

investigation and research

tell the truth , I really underestimated the difficulty of developing this thing

I was going to github Pull any one of them ,

Inset to nwjs Just go inside ,

However, I saw several high scoring items , Not to my liking .

( however , To be honest, thank you for these projects , I wrote this tool to refer to the source code of many open source projects )

I think the main difficulty of this project is :

* Find a suitable editor
* Edit window and preview window scroll bar synchronization
* Open the communication channel with the official website of blog Park
Fortunately, I have overcome all these difficulties

What you see now , This is the result of intermittent efforts

function

Here are all the functions that I think are important

* Two column layout , Write in the left column markdown content , Right bar live preview ;
* Left and right scroll bar synchronous scrolling
* Allow users to drag and adjust the width of left and right columns
* Support the most basic markdown grammar ( link , form , title , Bold , Italics , quote , Ordered unordered list , code , Horizontal line, etc )
* Blog login ( Log in screen of blog Park , Use the official login mechanism )
* Retrieving historical articles ( You can retrieve all the essays in your blog Garden , Paging support )
* Revise article ( All the historical essays in your blog Garden , You can use this tool to edit and modify )
* New article ( Write a new essay from scratch , Save as draft by default )
* The screenshot tool pastes the screenshot directly into the editor ( The picture is saved on the server of blog Park )
* Pure client , Direct communication with blog Park server
* Pure green version , No installation required , No additional services , Smaller size ;
* Automatic upgrade function ( After I release the new version , You will be prompted to upgrade );
* Open source is the key !( Follow this code and write something like Taobao Xiadan , It's easy )
* Relative to previous version , Did some UI/UE Beautification work ;
Open Source

Open source address :https://gitee.com/xland/cnblogs <https://gitee.com/xland/cnblogs>

Download address :https://gitee.com/xland/cnblogs/releases
<https://gitee.com/xland/cnblogs/releases>

support

I hope you can give me a star;

Let me know you're using it ;

It gives me the motivation to continue to do something useful to you ;

Key source code

The first code is used to control the synchronous scrolling of the scroll bar :
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);
Second code , Is for insertion markdown Characteristic of grammatical symbols
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); };