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>withcontenteditable - Include the
grande.min.jsfile (indist/directory) at the bottom of your<body> - Bind the events on the
articletags withgrande.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 thecontenteditableelements on the pagemenu.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 ifsubpixel-antialisedis 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-upwardson Medium