This repository has been archived by the owner on Mar 8, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1k
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
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>