HTML and CSS Reference
In-Depth Information
ing its
<!DOCTYPE>
declaration, and
<head>
section. You'll use this property with our
visual editor's
<iframe>
to make the entire contents of the
<iframe>
editable.
Note
If you need to edit the contents of only a specific HTML element, then use the
conten-
teditable
attribute. Although
contenteditable
is new in HTML5, it started out as
a proprietary extension in IE and was later adopted by other browser vendors. As a result,
browser support for it is widespread, so you can use it without fear of leaving anyone be-
hind.
Setting
designMode
to
on
is straightforward, but you also need to build logic that will
connect the visual editor to the HTML markup editor so that any changes are synced across
them when appropriate. You also need to implement the switch button to allow the user to
switch between the two editor modes. Enough chat about what you need to do—let's go
ahead and do it.
Step 1: Turn designMode on and synchronize the content of both editors
In the app.js file, add the following code immediately after the line
win-
dow.addEventListener('hashchange', jump, false)
.
