HTML and CSS Reference
In-Depth Information
• The HTML Editing API to allow users to edit HTML markup using rich-text con-
trols
• The Geolocation API to capture the user's current location for use in a map
• The File System API to provide a client-side sandbox to store the user's files
• Drag and drop to simplify the importation and exportation of files
To make things more fun, the application also offers a client-side sandboxed filesystem
where the user can create, import, export, edit, view, and delete files. To put icing on the
cake, users will also be able to import and export files using drag and drop.
Let's jump right in with a high-level overview of the sample application you're going to
build, followed by work on prerequisites and first steps.
3.1. The Super HTML5 Editor: application overview, prerequisites, and
first steps
As you can see in
figure 3.1
, the final application will be split into two major views, the
File Browser view and the File Editor view.
Figure 3.1. The two views of the Super HTML5 Editor application are shown. The File Browser view (left) allows
users to manipulate the files stored in the app; the File Editor view (right) enables the file to be modified using
rich-text editing controls or directly using HTML markup.
The File Browser view allows users to create empty files, import files from their computers,
view a list of existing files, and perform an action on one of these files such as View, Edit,
Delete, and Export. This view also provides drag-and-drop support for working with files.
The File Editor view provides two editors for manipulating the file's contents: a visual
WYSIWYG editor and a raw HTML markup editor. This view also allows the user to save
