wysihtml5 0.3.0 RC 1

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach.
It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
The code is completely library agnostic: No jQuery, Prototype or similar is required.

Features:

Auto linking of urls as-you-type
Generates valid and semantic HTML5 markup (no <font>)
Uses class-names instead of inline styles
Unifies line-break handling across browsers (hitting enter will create <br> instead of <p> or <div>)
Auto-parses content inserted via copy & paste (from Word, Powerpoint, PDF, other web pages, …)
Converts invalid or unknown html tags into valid/similar tags
Source code view for users with HTML skills
Uses sandboxed iframes in order to prevent identity theft through XSS
Editor inherits styles and attributes (placeholder, autofocus, …) from original textarea (you only have to style one element)
Speech-input for Chrome 11+

Browser Support

The rich text editing interface is supported in IE8+, FF 3.5+, Safari 4+, Opera 11+ and Chrome.
Graceful Degradation: Users with other browsers will see the textarea and are still able to write plain HTML by themselves.
As of now iOS and Android don’t support rich text editing properly. For now they are treated like IE 6+7.

Demos

Companies using wysihtml5

Basecamp – Leading web-based project management and collaboration tool
XING – Business Social Network with more than 12 million members
any many more …

Configuration

Following is a list of all configuration options with their corresponding default values:

  new wysihtml5.Editor("textarea-id", {
    // Give the editor a name, the name will also be set as class name on the iframe and on the iframe's body
    name:                 null,
    // Whether the editor should look like the textarea (by adopting styles)
    style:                true,
    // Id of the toolbar element, pass falsey value if you don't want any toolbar logic
    toolbar:              null,
    // Whether urls, entered by the user should automatically become clickable-links
    autoLink:             true,
    // Object which includes parser rules (set this to examples/rules/spec.json or your own spec, otherwise only span tags are allowed!)
    parserRules:          null,
    // Parser method to use when the user inserts content via copy & paste
    parser:               wysihtml5.dom.parse || Prototype.K,
    // Class name which should be set on the contentEditable element in the created sandbox iframe, can be styled via the 'stylesheets' option
    composerClassName:    "wysihtml5-editor",
    // Class name to add to the body when the wysihtml5 editor is supported
    bodyClassName:        "wysihtml5-supported",
    // Array (or single string) of stylesheet urls to be loaded in the editor's iframe
    stylesheets:          [],
    // Placeholder text to use, defaults to the placeholder attribute on the textarea element
    placeholderText:      null,
    // Whether the composer should allow the user to manually resize images, tables etc.
    allowObjectResizing:  true,
    // Whether the rich text editor should be rendered on touch devices (wysihtml5 >= 0.3.0 comes with basic support for iOS 5)
    supportTouchDevices:  true
  });

Events

The editor comes with a simple event handling:

  var editor = new wyishtml5.Editor("textarea-id", { ... });
  editor.observe("change", function() {
    alert("The content of the editor has changed")
  });
  
  editor.observe("load", function() {
    alert("wysihtml5 is ready for take off!");
  });

List of supported events:

load – when the editor is fully loaded
beforeload – for internal use only
focus – when the editor (regardless if rich text or source view) receives focus
focus:composer – when the rich text view receives focus
focus:textarea – when the source view receives focus
blur – when the editor (regardless if rich text or source view) gets blurred
blur:composer – when the rich text view gets blurred
blur:textarea – when the source view gets blurred
change – when the value changed (regardless if rich text or source view)
change:composer – when the value of the rich text view got changed
change:textarea – when the value of the source view got changed
paste – when the user pastes or drops content (regardless if rich text or source view)
paste:composer – when the user pastes or drops content into the rich text view
paste:textarea – when the user pastes or drops content into the source view
newword:composer – when the user wrote a new word in the rich text view
destroy:composer – when the rich text view gets removed
change_view – when switched between source and rich text view
show:dialog – when a toolbar dialog is shown
save:dialog – when save in a toolbar dialog is clicked
cancel:dialog – when cancel in a toolbar dialog is clicked
undo:composer – when the user invokes an undo action (CMD + Z or via context menu)
redo:composer – when the user invokes a redo action (CMD + Y, CMD + SHIFT + Z or via context menu)
beforecommand:composer – when the user is about to format something via a rich text command
aftercommand:composer – when the user formatted something via a rich text command

Useful helpers

When the browser supports rich text formatting the <body> of the page receives a css class “wysihtml5-supported”. This can be useful if you want to display some hints or activate certain UI elements.
When the browser supports rich text formatting a hidden <input> with name “_wysihtml5_mode” and value “1” is inserted after the textarea. This can be used on the server side to specially treat wysihtml5 output after form submit.
If within a <form> the editor hooks into the “reset” and “submit” events and ensures that the rich text element is in sync with the original <textarea>

Progressive-Enhancement/Initialization Step By Step

Takes a <textarea>
Checks whether the browser supports rich text editing properly (stops here if not)
Sets a class “wysihtml5-supported” on the <body> of the page (can be used to toggle text hints on the page via CSS)
Creates an inline <iframe> with <body contenteditable="true">
Copies textarea box styles (float, border, position, box-shadow, …) to the
<iframe>
Copies textarea text styles (color, font-size, font-family, text-indent, …) to
the iframe’s <body>
Copies several attributes (spellcheck, autofocus, placeholder, className, title, …)
from the <textarea> to the iframe’s <body>
Checks whether HTMl5 autofocus and placeholder attributes are set and
simulates their logic on the iframe’s <body>
Hides the <textarea>
Initializes sync logic (text you typed into the iframe’s <body> is automatically
copied to the hidden <textarea>)
Observes the form’s “onsubmit” and “onreset” events and simulates their
behavior on the iframe’s <body>
Checks whether a toolbar is given and sets event listeners on it’s link

How to compile your own wysihtml5

Clone and build the js file:

git clone git://github.com/xing/wysihtml5.git

cd wysihtml5

make

Run the unit tests:

make unittest

Research Material

Before starting this library we spent a lot of time investigating the different browsers and their behaviors.

Check this repository:
https://github.com/tiff/wysihtml5-tests

A compatibility table for rich text query commands can be found here:
http://tifftiff.de/contenteditable/compliance_test.html

A pure native rich text editor with HTML validator and live source preview is here:
http://tifftiff.de/contenteditable/editor.html

wvl / wysihtml5