This is a small Javascript library that implements features from Medium's editing experience. Take a look here.
Bower is the preferred way to install grande.js, it is available as grande in the Bower package repository.
Simply bower install grande
See the index.html in this repository for a functional example using the library.
To get up and running simply...
- Include the
div.text-menutemplate and an<article>withcontenteditable - Include the
grande.jsfile at the bottom of your<body> - Bind the events on the
documentwithgrande.init() - You are set!
There are two CSS files that come with the included demo:
editor.css: this file provides the style for thecontenteditableelements on the pagemenu.css: this file provides the toolbar styling to appear as it does below
The following tag stylings are available: <b>, <i>, <h1>, <h2>, <blockquote>, <a>, <ol>, <ul>
First off, major props to @tholman for the inspirational script. grande.js is a spiritual cousin of the fantastic plugin and aims to have feature parity with Medium. It adds multiple styles and will be diverging from the vision of being an in-browser editing experience to being a provider of the in-browser editing experience. grande.js will be providing the foundation for your website to have a wonderful editing experience.
- Lists (ul and ol)
- Images (figure)
- execCommand to support
<strong>and<em>