Markdown Editor

Do you like to write, even more so when using Markdown? If you answered “yes”, you may be interested in the brand new Markdown Editor for MODX. It's an amazing way to create great content, giving you new experience writing with Markdown. In fact, it might be one of the most fluid writing experiences of any platform out there.

Brief introduction

Markdown Editor is built on top of Ace, an awesome JavaScript editor. To deliver the best experience for writing Markdown, I implemented a few custom modifications for the Ace editor, including better list support/behavior, drag-and-drop image and file uploads, display modes and more.

For parsing Markdown formatted text into HTML, I chose the JavaScript library Remarkable. I chose to use a JavaScript library instead of a server side solution, because JavaScript gives you a live preview without the need to create a more complex Ajax-request architecture. Less is more (and it's really, really fast, too).

Markdown Editor

Main Features

The best feature is using Markdown for your content and that's just the begining…

Drag-and-Drop & Image Uploads

You can upload any file easily; just drag-and-drop files into the Markdown Editor window and that's it. Markdown Editor will create the correct Markdown syntax for you, wherever your cursor is placed.

If you are uploading an image, a cropper window will prompt you to crop and rotate the image, even using crop sets to make sure things are consistently sized and scaled.

Cropper

And if you're wondering, you can still drag-and-drop things from the File and Resource Trees into Markdown Editor.

Supports Your Camera on Mobile, Too

If you're writing from an iPad or Android tablet, you can even use the camera to take a picture on the spot, and upload it to the server, without having to leave the MODX Manager. (Yes the Manager is pretty usable on tablets!)

oEmbed is Awesome

The popularity of embedding third-party content grows every day, and Markdown Editor embraces this fully. Because Markdown doesn't have any official style for embedding content, there is a custom syntax for it:

[embed url]

For embedding content, Markdown Editor uses several libraries and services including Embed.ly Cards, Embed.ly Extract, Embed.ly Embed, Essence and noEmbed. You can specify the ones to use in the System Settings, including the fallback order. This allows embedding as much content as possible.

For example, here's something you can buy me on Amazon, using Embed.ly Extract:

[embed http://www.amazon.com/100-Oz-Mountain-Dew-Giant/dp/B00B1M94SA]

100 Oz Mountain Dew Giant Mug

Product by Mountain Dew

Shop Mountain Dew at the Amazon Travel & To-Go Drinkware store. Free Shipping on eligible items. Everyday low prices, save up to 50%.

$22.00

(I like Mountain Dew.)

Resource Auto-suggest

Say you wish to link to a Resource in MODX. Maybe you remember its ID—good for you (or maybe not)! For those who do not remember the ID, you typically have to look through the Resource tree to find the correct ID. When you finally find the ID, you can create the link. That's a lot of extra work!

With Markdown Editor, this is much simpler. It's especially great for lazy people like me! You can just start typing a page title, hit cmd/ctrl + space and select the Resource you want. Markdown Editor searches for matching page titles based on what you type, and you can select them using the arrow keys and the keyboard.

Display Modes

Markdown editore has several display modes, which you can configure via the MODX System Settings. You can toggle between full screen and non-full screen mode, and between seeing only a Markdown and split screen mode with the Markdown editor to the left of the live preview.

In the split screen mode, you will see a live preview of you current Markdown content. You can also turn on MODX tags support, which will leverage the live preview even more, because you will be able to preview parsed MODX tags (yes, Snippets, Chunks, Placeholders, etc.).

Writing in full screen mode is a great way to hide the distracing Manager UI elements hidden behind an uncluttered, streamlined UX. Focus on your writing, not the tool you're writing in.

File and Embed Buttons

If you can't remember how to embed that Instagram pic from your friend, or that latest Youtube video that cracked you up, just press the helpful "+" button that appears in the gutter when you are on an empty line in Markdown Editor. Inspired by Medium, icons appear that bring up the image upload or a dialog box for embedding URLs when you press the plus-icon in the gutter.

System Settings

There are currently 36 system settings to modify and customize how Markdown editor to fit your exact needs. You can customize almost everything: from the visual theme to cropping profiles for cropper window to how it opens by default.

Documentation and Administrivia

To read more about Markdown Editor, its system settings, oEmbed support and all other things Markdown Editor does, please visit the documentation page.

Markdown Editor is released for free under the MIT license; its source codes is on GitHub.

If you would like to support its ongoing development, please do so via PayPal. Anything is appreciated!

Video By John Peca MODX