Awesome

grande.js

This is a small Javascript library that implements features from Medium's editing experience. Take a look here.

How to get started

Installation

Bower is the preferred way to install grande.js, it is available as grande in the Bower package repository.

Simply bower install grande

Usage

See the index.html in this repository for a functional example using the library.

To get up and running simply...

Include an <article> with contenteditable
Include the grande.min.js file (in dist/ directory) at the bottom of your <body>
Bind the events on the article tags with grande.bind(document.querySelectorAll("article"))
You are set!

Included files

There are two CSS files that come with the included demo:

editor.css: this file provides the style for the contenteditable elements on the page
menu.css: this file provides the toolbar styling to appear as it does below

Options to grande.bind

The bind function currently accepts two parameters: bindableNodes and an options list.

The calling code can pass in a NodeList as the first parameter that will bind to these elements and enable contentEditable on them, if nothing is passed in it defaults to elements that match the selector .g-body article.

The second parameter is an options object that accepts the following keys:

animate: if true, this will trigger the CSS animations (defaults to true). Useful to turn to false if subpixel-antialised is needed in Safari.

The following tag stylings are available: <b>, <i>, <h1>, <h2>, <blockquote>, <a>, <ol>, <ul>, <hr>

Questions

This is very similar to Zenpen, why?

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.

Roadmap

Images (figure)
execCommand to support <strong> and <em>
CSS animations to match the pop-upwards on Medium