HTML and CSS Reference
formatting buttons, and how to use geolocation to insert a map of the user's current posi-
3.2. Rich-text editing and geolocation
The visual editor in this chapter's sample application will allow users to write and edit
rich-text content using formatting buttons that are similar to those in most word-processing
applications. After formatting the document, users may need to see the underlying HTML
markup to make adjustments, so the application will enable them to switch between the
visual editor and the HTML editor. Also, so that you can at least get your hands dirty with
the Geolocation API, we'll have you add into the application a button that inserts a location
In this section, you'll learn
• To use the designMode property to signal to the browser that an HTML docu-
ment is editable
• To use the Editing API's execCommand method to provide rich-text editing con-
• To use the Geolocation API
The work happens in three steps:
• Step 1: Turn designMode on and synchronize the content of both editors.
• Step 2: Implement the rich-text editing toolbar in the visual editor.
• Step 3: Use geolocation to insert a map of the user's location.
3.2.1. Using designMode to make an HTML document editable
To facilitate the visual editor mode in your app, you need to allow users to directly edit the
HTML document without needing to use HTML markup. In order to make this work, you
property's value to on for a given document, the entire document becomes editable, includ-