HTML and CSS Reference
In-Depth Information
formatting buttons, and how to use geolocation to insert a map of the user's current posi-
tion coordinates.
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
map.
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-
trols
• 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
need to take advantage of a JavaScript object property,
designMode
. When you set this
property's value to
on
for a given document, the entire document becomes editable, includ-
