-
Notifications
You must be signed in to change notification settings - Fork 337
Progressive Enhancement
iceton edited this page Apr 20, 2012
·
2 revisions
A step by step explanation on how wysihtml5 turns a textarea into a rich text editing interface.
- 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 its link