Ghost's Mobiledoc Editor
JavaScript CSS HTML
Latest commit f29b4fd Jan 4, 2017 @JohnONolan JohnONolan committed with ErisDS 2017


This is the new mobiledoc editor for Ghost-Admin. It's still a work in progress but we're very excited about it.

Here are a few of our goals:

  • To make the best ghosh darn writing experience on the interwebs.
  • To build a tool that works just as well for non technical content creators as power users.
  • To support rich content as easily as dealing with an image. Want a poll mid article? You got it. Want to paste a complete NG application in raw HTML? You got it.

When embarking on this project the last thing we wanted was to use one of those WYSIWYG editors with the million options and incomprehensible and inconsistent markup (you know who I'm talking about), to that end we chose to build our editor on top of mobiledoc-kit, you can read more about our decision here.

So why mobiledoc?

Mobiledoc is a new format for storing rich content, it's platform independent and isn't tied specifically to HTML (we can render a plain text version for a search index for instance). It allows for the embedding of rich applications inside your content using the cards paradigm. It's also a standard so content written in and for Ghost is compatible with any other mobiledoc system, and vice versa.

To us it seemed like the best compromise between a feature rich WYSIWYG editor and the markdown that we so love.

Like Ghost, Mobiledoc-kit is still moving towards its 1.0 release - it still has some bugs, but we're working together to make something really fun.

To try it out:

  • clone this repo
  • cd Ghost-Editor
  • npm install && bower install
  • ember serve
  • Visit http://localhost:4200
  • Click in the middle to activate the editor

If you want to help out:

A fantastic guide on the Ghost workflow is here:, it's well worth a read.

Some features of the editor.

Ghost-Editor is very much a WYSIWYG editor but it supports a subset of markdown as content shortcuts for those of us who are mouse adverse, specifically:

# H1
## H2
### H3
1. Ordered Lists
* Unordered Lists
- Unordered Lists
> Block Quote
``` code blocks (generates a new markdown card) ```

There's also an inline menu that you can access by pressing the / key within the editor.

Right now we only have three built in "cards", a markdown card, an HTML card, and an Image card. But we plan to add the ability to install custom cards in the near future and have some big and exciting plans (and we're even more excited about what the community will do with it.), so watch this space.

Copyright & License

Copyright (c) 2016-2017 Ghost Foundation - Released under the MIT license.