Medium.js keeps HTML code within contenteditable
semantic, simple, and clean. Medium.js also supports placeholders, automatic HR (or BR, or P) creation, events, hotkeys, simple & complex element injection, and more!
Medium.js is html5 compliant and has been tested in Firefox, Chrome, Safari, Opera, & IE 9+. Browser support is constantly improving!
This script is inspired by Medium's beautiful content editor, something we have aspired to emulate since it's inception.
This code is brought to you by
jakiestfu author of Snap.js and Behave.js
and
Robert Plummer author of wikiLingo and jQuery.sheet.
Please share!
(cmd/ctrl+[b,u,i])
input
or textarea
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 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 Medium.js 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:
Medium.inlineMode
or "inline"
allows for no rich text editing, and no newlines. Similar to an input
element.Medium.partialMode
or "partial"
is like a textarea
, but allows support for paragraphs.Medium.richMode
or "rich"
allows styling of the text, paragraphs, and hr tags.maxLength
: The max size you want to allow for the editor modifiers[{Number}|{String}] = function(event, element) {};
:
Key modifiers from event.keyCode
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.js, customizable to your liking. beforeInvokeElement()
:
Triggered just before an element is invoked.
An element is invoked over a highlighted area.
The this
within the context of this function is Medium.Element
that is about to be invoked.beforeInsertHtml()
:
Triggered just before html is added.
Inserted at cursor, but only if medium's element has focus.
The this
within the context of this function is Medium.Html
that is about to be inserted.beforeAddTag(tag, shouldFocus, isEditable, afterElement)
:
Triggered just before a tag is told to be created from a keyboard action.
keyContext[{Number}|{String}] = function(event, element) {};
:
Triggered just before a keydown event.
Can return false or true to override existing functionality, or null to continue.
The element
is the element where the caret currently resides.
There are two behaviors available, wild and domesticated.
wild
: (default) uses web browser's document.execCommand()
method to insert and invoke elements, which has limitations when using complex html in more tailored scenarios.domesticated
: when undo.js
& rangy
are included before Medium.js, domesticated behavior is triggered. Domesticated behavior makes contenteditable behave when dealing with inserting and invoking more complex html. By using undo.js, complex elements can be injected without difficulty and be undoable. By using rangy, we are able to control contenteditable's ability to invoke elements. Also, created is the onchange
event (which does not exist in modern browsers for contenteditable
element for some unknown reason) is fired when the value of the element changes.Methods provide functionality that can be used with buttons, toolbars, WYSIWYG editors, and the environment it is being used with.
behavior()
: The type of behavior currently being used with Medium.js.'wild'
or 'domesticated'
destroy()
: Destroy the instantiated medium.js invokeElement({String}tagName, {Object} [attributes])
: invokes an element.insertHtml({String|HtmlElement} html, {Function} [callback])
: inserts html into the editor at the cursor.makeUndoable()
: makes the current state of the editor undoable/redoable. redo()
: redo an edit. undo()
: undo an edit. value({String} [value])
: set or get value from medium.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.
Medium.js was written to be used in many environments, of which, toolbars and WYSIWYG (what you see is what you get editors) editors are used commonly. Plus, when domesticated, you can teach contenteditable all kinds of new tricks ;).
No, it doesn't. If you're looking for a script that adds support for Medium's toolbar, take a look at MediumEditor. If you're looking for a complete web based editor with a Medium-like toolbar, take a look at wikiLingo, or 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.
This is because of you. But if you find a bug, please fork Medium.js and contribute so we can continue wide support!
Need commercial support for Medium.js? Currently provided by Visual Interop Development llc., drop us a line, we can't wait to see what we can do together.
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.