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 an
<article>withcontenteditable - Include the
grande.min.jsfile (indist/directory) at the bottom of your<body> - Initialize a new editor on the
articletags withnew Grande(document.querySelectorAll("article")) - 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 Grande 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:
-
mode: defaults to rich which enable users to format the text and enter multi-line function. If set to inline, it'll only accepts single line input and no formatting. If set topratialit'll allow multi-line editing without rich editing. -
placeholder: if set, this will be the placeholder value of the element(s), when the user focus on the element the placeholder will be deleted and put back when blurred while the field is empty. -
animate: if true, this will trigger the CSS animations (defaults to true). Useful to turn to false ifsubpixel-antialisedis needed in Safari. -
imagesFromUrls: if set to true, it'll replace images URLs withs tags in "rich" mode.
The following tag stylings are available: <b>, <i>, <h1>, <h2>, <blockquote>, <a>, <ol>, <ul>, <hr>
This is a clone of Grande, but we choose to take a different approach of usage that is similar to Medium.js. Some of the grande methods were binded on document which didn't allow much configuration to be set for different elements on the same page. We plan to keep this in sync with the original mduvall/grande.js. Feel free to use this in any of your projects.
- Images (figure)
- Shortcuts for formatting (Cmd+b, Cmd+i...)
- More Code Cleanup.
- Better unit testing.