HTML and CSS Reference
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.
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-
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) .