Medium.jsJoyfax Broadcast download page. Fax software allows you to send and receive faxes in a network environment.
conversion of Microsoft Access database objects to SQL Server database objects
, loads the . ... DBSync for MS Access & PostgreSQL. DBSync for MS ...Fixing ContentEditable – Content Uneditable – Medium
ContentEditable Toolbar
Medium.js is a tiny JavaScript library for making HTML5's contenteditable beautiful.
Taking control of content editable
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:
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
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[|] = 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[|] = 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.
You need to be a member of On Feet Nation to add comments!
Join On Feet Nation