This is Medium.js. It keeps HTML code within
contenteditable semantic, simple, and clean. It also allows for placeholders, automatic HR creation, events, hotkeys, and more.
This script is inspired by Medium's beautiful content editor, something I have aspired to emulate since its inception.
Medium.js has been tested in Firefox 17+ (No Placeholders), Safari 5+, IE 10+, and Opera 11+ (No placeholders and no hotkeys). Hopefully, browser support (through abstraction), can be improved upon in the near future.
Simply include the Medium JS library and CSS, and you are ready to rock. No dependencies
The code within Medium.js editors are very semantic and organized, giving you peace of mind with using
All options (excluding
cssClasses) may be overridden with
data-medium-* attributes on the element.
debug: Log properties to the console
element: The element in which you want to apply the Medium editor to.
modifier: The modifier you want for making things bold/italic etc. May be set to
placeholder: An optional string that displays when the editor is empty
autofocus: Set the focus to the specified element automatically
autoHR: An HR tag will automatically be inserted if there are two empty paragraphs in succession
mode: Dictate the mode in which you want to allow editing. Currently there are three:
"inline"allows for no rich text editing, and no newlines. Similar to an
"partial"is like a
textarea, but allows support for paragraphs.
"rich"allows styling of the text, paragraphs, and hr tags.
maxLength: The max size you want to allow for the editor
modifiers: Key modifiers from
e.whichthat will be used to apply the respective styling changes or hook into events.
tags: Dictates the base tags allows.
tags.paragraphis the element that will be created for paragraphs.
tags.outerLevelare the only elements allows to replace a top-level
tags.innerLevelare the only tags allowed within the parent tags. No additional tags are allowed unless included here.
cssClasses: Various classes used within Medium, customizable to your liking.
Medium.js overrides many default keyboard events and substitutes a more cross-browser compliant way to interact with
contenteditable elements. This means that you can use
contenteditable without fearing your user is going to enter poor or invalid HTML. It keeps things tight, organized, and semantic.
No, it does not. If you're looking for a script that adds support for Medium's toolbar, take a look at ZenPen.io
Empty tags do not have what is called
layout, a sort of property of an element. You need to set a
min-height on the paragraph element you specify.
Please fork Medium.js and contribute, wide support is so close!
Below each code block is a demo for inline, partial, and rich editors. On the rich editor, try using hotkeys like cmd+b or ctrl+i, etc.
Copyright (c) 2013 Jacob Kelley
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.