HTML5 Rich Text Editor
Switch branches/tags
Nothing to show
Pull request Compare This branch is 127 commits behind xing:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.
The editor is already in use on – a social network with more than 10 million members.


  • 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 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.



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


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

Neat features

  • 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 makes sure that the rich text element is in sync with the original <textarea>

Progressive-Enhancement/Initialization Step By Step

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

How to build your own wysihtml5 files

Clone and build the js file:

git clone git://
cd wysihtml5

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:

A compatibility table for rich text query commands can be found here:

A pure native rich text editor with HTML validator and live source preview is here: