While working on one of my latest projects, I stumbled across an amazing markdown editor “MirrorMark” based on CodeMirror. As I really like the style and the highlighting, I decided to port it over to Kirby and make a panel extension out of it. With this brief explanation in place, let me introduce you to:
Visual Markdown Editor
This Panel field plugin for Kirby 2 enables you to use an intuitive and visual markdown editor without any hazzle. Just drop in the plugin and you’re good to go!
Features
Extensive markdown syntax highlighting
Convenient toolbar including the most used markdown features
Multiple cursors / selections support
Help links to support users unfamiliar with markdown
Fully compatible with existing content & templates
As always, let me know what you think about it. Every constructive feedback is very welcome and I’m more then happy to optimize and extend the extension based on your feedback!
Looks great! Thank you.
I was looking for something like this, but hadn’t discovered MirrorMark (it seems to be a very recent project). Every other alternative I’ve seen had big issues. Oh well, I just reported a bunch of serious issues on MirrorMark’s Github page. The project is fresh and the owner seems to be very reactive, things should be ironed-out sooner than later.
What I like is that the original Markdown is kept in the editor. Most of them use contenteditable and html and everything has to be converted to markdown before the page is saved.
This is an editor than doesn’t try to hide markdown.
My only gripe with CodeMirror is that it is pretty useless on a phone. That said I have yet to see a web editor that works well on mobile (some “native” ones in apps work).
An easy workaround would be to disable it when the screen is very narrow.
However, mirrormark is not an option for me. The extension will eventually move away from using MirrorMark but use it’s own CodeMirror overlay instead.
visualmarkdown would make the most sense. I just thought it is too long and looks odd in the blueprints (I know, I’m a bit oversensitive here )
Looks really nice:) Maybe clients will prefer the wysiwyg version better, but I think for those who are willing to get along with markdown, it’s a great start.
Only thing I find missing so far, is headers. And maybe the ability to upload an image rather than inserting a placeholder.
Regarding images, I wonder if there is a way to display them in the editor instead of the markdown/Kirbytext?
I also like how Ulysses 3 displays image and link info. Lots of crazy ideas here: http://www.ulyssesapp.com/mac/ in the “Plain Text Enhanced” section.
Very excited by this plugin. I think I’ll use it very soon in a site I’m currently building for a client.
The way Ulysses 3 handles images and links in markdown is awesome! However I don’t think you can implement something similar with CodeMirror, which is what the Editor uses ultimately.
Alas I haven’t seen any project close to that level of quality/features yet. I have notes somewhere in a Gdoc with a comparison of some visual Markdown editors. I can share it with you if you’re looking for ideas
Just saw a post on CommonMark’s forum announcing an upcoming parser. The code is not public yet, but it may be lightweight compared to CodeMirror, as it parses just one language.
)
