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 it's 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.
This code is brought to you by jakiestfu, author of Snap.js and Behave.js. Please share!
(cmd/ctrl+[,b,u,i])inputSimply 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 contenteditable.
All options (excluding modifiers, tags, and 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 'auto', 'cmd', or 'ctrl'. 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 input element. "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.which that will be used to apply the respective styling changes or hook into events. tags: Dictates the base tags allowed. tags.paragraph is the element that will be created for paragraphs. tags.outerLevel are the only elements allowed to replace a top-level p tag. tags.innerLevel are 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!
MIT Licensing
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.