Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

HTML5 Rich Text Editor

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 build
Octocat-spinner-32 dist
Octocat-spinner-32 examples
Octocat-spinner-32 lib
Octocat-spinner-32 parser_rules
Octocat-spinner-32 src
Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 LICENSE
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.textile
Octocat-spinner-32 version.txt
README.textile

wysihtml5 0.2.0

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 XING.com – a social network with more than 10 million members.

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

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
  });

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

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
    <iframe>
  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://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

Contributors

Something went wrong with that request. Please try again.