Skip to content

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

Clone this wiki locally