Skip to content
This repository was archived by the owner on Mar 8, 2019. It is now read-only.

Progressive Enhancement

Jump to bottom
iceton edited this page Apr 20, 2012 · 2 revisions

Progressive Enhancement

A step by step explanation on how wysihtml5 turns a textarea into a rich text editing interface.

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

For a start, let’s assume that you have a simple web page, you want to make editable with Aloha Editor and you already have placed Aloha Editor on your web server.

This is your web page:

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Getting Started with Aloha Editor</title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body> <div id="main"> <div id="content"><p>Getting started with Aloha Editor!</p></div> </div> </body>

Clone this wiki locally