Medium.js

Taking control of content editable

---

This is Medium.js

Easy

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!

Compliant

Medium.js is html5 compliant and has been tested in Firefox, Chrome, Safari, Opera, & IE8+. Browser support is constantly improving!

Inspired

This script is inspired by Medium's beautiful content editor, something we have aspired to emulate since its inception.

Authors

This code is brought to you by:

• Jacob Kelly
  ( author of Snap.js and Behave.js )
• Robert Plummer
  ( author of wikiLingo and jQuery.sheet )
• All these amazing people!.

---

Features

• Free & Open Source
• Modern browser compliant
• Contributions Welcomes
• WYSIWYG editor or Toolbar ready
• Keeps HTML organized and semantic (even on paste events)
• Rich text editing with hotkeys (cmd/ctrl+[b,u,i])
• Placeholders
• Inline, partial, and rich editors
• Automatics HR (or BR, or P) tag insertion on two empty paragraphs in succession
• Great for writing titles, comments, or entire articles
• Much more expressive and customizable than input or textarea

---

Usage

Simply include the dependencies, Medium.js library, CSS, and you are ready to rock.

---

Demos

---

Semantic

The code within Medium.js editors are very semantic and organized, giving you peace of mind with using contenteditable.

---

Options

All options (excluding modifiers, tags, and cssClasses) may be overridden with data-medium-* attributes on the element.

• 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.
  • Medium.inlineRichMode or "rich" allows styling of the text, but no new lines.
• 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 allowed tags. Can be set to null for extreme freedom.
  
  

  • tags.break is the element that will be created for line breaks.
  • tags.horizontalRule is the element that will be created for a horizontal rule.
  • tags.paragraph is the element that will be created for paragraphs.
  • tags.outerLevel are the only elements allowed to replace a top-level tag.
  • tags.innerLevel are the only tags allowed within the parent tags. No additional tags are allowed unless included here.
• attributes: Dictates attributes. Can be set to null for extreme freedom.
  
  

  • attributes.remove are attributes to be removed.
• 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.

---

Methods

Methods provide functionality that can be used with buttons, toolbars, WYSIWYG editors, and the environment it is being used with.

• destroy(): Destroy the instantiated medium.js
• invokeElement({String}tagName, {Object} [attributes]): invokes an element.
  returns {Medium}
• insertHtml({String|HtmlElement} html, {Function} [callback]): inserts html into the editor at the cursor.
  returns {Medium}
  callback's "this" is inserted/created HtmlElement
• 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.
  When value is defined, element's innerHTML is set, and {Medium} is returned.
  When value is undefined, will return element's innerHTML {String} value.

---

---

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.

Licensing