Be careful: Before using the software, You need to set the default editor tomarkdown

Opening chapter

Talk nonsense, Interface picture first:

10 month25 day, I published the blog Garden article editor's4.0 Edition <>
, With the support of many friends,

( And then I found some problems myself, So I secretly sent the blog Garden article editor's4.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 supportmarkdown,

I feel like writing.markdown There are still a lot of people,

Investigated the support of blog Parkmarkdown editor,

And I developedmarkdown Editor, For those usingHTML For users of rich text editor, It's easy, No big change,

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

Investigation and research

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

Originally intended togithub Pull any one of them,

Embed intonwjs 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


Here are all the functions that I think are important

* Two column layout, Write in the left columnmarkdown 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 basicmarkdown grammar( link, form, Title, Thickening, 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, Support paging)
* Revise article( All the historical essays in your blog Garden, You can use this tool to edit and modify)
* New articles( 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 edition, No installation required, No additional services, Smaller volume;
* 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, Done someUI/UE Beautification work;
Open Source

Open source address: <>

Download address:


I hope you can give me astar;

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(, '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 insertionmarkdown 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); };