A few days ago, a new Markdown editor for MODX was released. For those of you not yet familiar with Markdown: now would be a perfect time to catch up! In a nutshell, Markdown is a text editor which is very easy to understand and use, and also converts your text to clean, valid HTML. 

I’m not going to explain exactly how Markdown works (others do that better), but the general idea is that you don’t need to fiddle with a (complex) text editor or HTML tags anymore, in order to write rich content. You can insert things like headings, lists, links and images as you type, which will surely save you a lot of time and frustration. Go ahead and give it a try, you won’t regret it!

For those of you already used to writing with Markdown: you’re probably just as excited as I am with this shiny new extra! So let’s just dive in and see how it works…

Installation

The easiest way to install the package, is of course through the package manager. But you can also clone the Git repository and install it with Git Package Management, so you’re always on the latest code and can help with testing or contributing to the project. Instructions for that can be found here.

The Markdown editor works like any other add-on text editor, so after the package is installed, you have to change the which_editor system setting to Markdown Editor in order to make it work.

The Editor

Ok, so what does a resource look like now with the new editor in place?

Showing the Markdown Editor with content side-by-side.
Showing the Markdown Editor with content side-by-side.

As you can see, the Content field is split up into 2 sections now. The one on the left is where you place the Markdown formatted content, and on the right is your live preview. Yes, that’s right.. You can see what it looks like in HTML in real time. I’ve always admired this feature in the Ghost CMS, a platform mainly targeted at frequent bloggers / writers, so I’m happy like a kid in a candy store to see it appear in MODX now too!

This split-screen setup means you can write your content blazingly fast, making it ideal for people who have to write a lot of content regularly. Blog posts, for example, but also documentation and how-to guides can be written in one breath, since you won’t be interrupted by selecting the correct Headings from a menu or selecting text to turn into a link. And next to fast, Markdown is also very easy to learn. You can explain it to a client in minutes, making it a very appealing alternative to regular Rich Text Editors in many cases.

Note also the little icons in the bottom left and right corners. On the left are options for quickly adding images, files and external links, and on the right you can toggle the live preview and switch to full-screen mode. Ideal for distraction-free writing!

And the fun doesn’t end there..

Coolest Features of Markdown Editor

On top of the standard Markdown goodness, this MODX extra comes with a lot of other interesting features. The live preview you’ve seen, but there’s also:

  • Drag & drop upload
  • Image cropper
  • Full screen focused writing mode
  • oEmbed through multiple services
  • Resource suggestion on ctrl+space
  • Parsing MODX tag in live preview
  • Custom CSS for Manager preview
  • Github Flavored Markdown
  • Auto include GFM & Highlight on frontend
The image cropper in Markdown Editor 
The image cropper in Markdown Editor 

For a more in-depth explanation of these features, please read this article, written by the developer himself.

What if other users want to use another RTE?

Although this is possible by simply adding a which_editor system setting to their user account (or user group), it does however have 1 major limitation. Markdown for MODX does store the generated HTML in the content table, so users with a different RTE can view and edit this content just fine… But by doing this, the Markdown markup will not be changed. This is stored in it’s own database table, so if you reload and save the same page again with the Markdown editor enabled, all changes will be overwritten. Just keep that in mind when you want to try this out.

Limitations compared to a “regular” RTE

With most RTE’s it is possible to add additional styling to elements by adding classes to their HTML tags.

<p class="lead">Lead text, for example, is fairly common.</p>
<a class="button">Or links styled as buttons...</a>

This is not possible is a bit tricky, because it involves adding the HTML inline. I tried that, and it works, although still a little shaky (= not client proof ;)) at the moment with the MODX Markdown Editor. And of course you can’t switch here to HTML view like most regular RTE’s, so the HTML will always be in your markup.

Also, creating tables with Markdown can be a bit of a hassle, and it is only supported in Github Flavored Markdown.

Conclusion

Pros

  • You can write Markdown pretty much anywhere; it’s just plain text
  • Easy to learn, you can’t even call it syntax
  • Easy to adapt your workflow for using Markdown
  • Easy to exchange between platforms (Github, wiki’s, DayOne*)
  • Perfect for blogging
  • Awesome extra features of the MODX Markdown Editor

* Worth checking out if you’re a Mac / IOS user. Amazing journalling app with Markdown support.

Cons

  • Adding classnames to elements
  • Limitations of using the editor side-by-side with other RTE
  • Not (yet ;)) working in combination with ContentBlocks
  • Currently no way (that I know of) to restrict the editor to certain templates or resource types

The Verdict

The core philosophy of Markdown is focused on ease of use: be as easy-to-read and easy-to-write as feasible. If you have mastered web surfing, can type, and know how to copy/paste links to websites, you possess the technical skills you need to use Markdown Editor.

If this statement sounds good to you, why not give the MODX Markdown Editor a try? Markdown is easy, fast, clean, portable and flexible, and this MODX editor offers by far the best Markdown experience I’ve seen on the web so far. So a big thank you to John Peca, Ryan Thrash, and Roman Klos for creating this extra! A brilliant addition to the MODX ecosystem, one that opens a lot of interesting new doors.

Bonus tip: convert Google Docs to Markdown

Are you currently using Google Docs a lot for creating content before it enters MODX? Then this might be worth checking out.

Do you have any tips to add? Or suggestions for future releases of the editor? And how are you using Markdown right now? Please feel free to share your insights below :)