Programming Tools: HTML WYSIWYG Editors
Editor's Note: This article has been updated since its original publication.
I have a dirty little secret. When I started to build my first Web site a few years back, I used Microsoft's FrontPage. The main reason I chose to use FrontPage was its WYSIWYG facility. It made creating tables, changing the look of the text, renaming HTML pages and many other tasks a snap. For the professionals among you, this may be heresy, but after cleaning up the generated code, I had a useful site. For a number of years, I have been looking for equivalent Linux products. The wait may be almost over.
Although nothing yet approaches FrontPage's ease-of-use, we now have a number of products that are truly WYSIWYG editors. They may grow into something much more.
From the set of Linux HTML editors now available, the most advanced seems to be NVu (New View). NVu offers users the ability to:
Import complete sites.
Publish the current set of Web pages to the Web.
Export pages as ASCII text.
Spell check pages.
View pages in normal, tagged HTML, full HTML and preview modes.
Set a wide variety of encodings, including None, Unicode (UTF-8) and Western (ISO-8859-1).
Create tables easily.
Create forms easily.
Insert special symbols visually, quickly.
Insert a table of contents based on text styles.
Insert custom PHP code or comments.
Write in a left-to-right or right-to-left direction, for those using Hebrew or Arabic.
In addition, NVu offers a number of tools, including a powerful built-in style sheet editor called CaScadeS. It operates in one of two modes, beginner and expert. NVu also has a markup cleaner and validator, extensions and themes facilities and Web development tools, such as a Javascript console, DOM inspector and Component Viewer. Figure 1 shows a NVu snapshot of a typical Web site in normal view.
Figure 1. Snapshot of a Typical Web Site in Normal View
Figure 2. Same Snapshot, in HTML Tag Mode
Figure 3. Same Snapshot Portion, in HTML Source Mode
In Figure 4, I used the CSS editor to display part of the style sheet for the www.python.org site.
Figure 4. CSS Editor at Work
Figure 5. A Simple Table to Show Smileys with Labels
Figure 6 shows the clean HTML that NVu produces for the simple table example depicted in Figure 5.
Figure 6. Simple Table Example in NVu
There is a caveat to the code in Figure 6, however. By default, NVu generates files with an xhtml extension. The extension tells browsers to use strict HTML scanning rules when processing the file. Under these rules, the clause http-equiv="content-type" in line 5 causes an error in some browsers, particularly Firefox. There are two workarounds. Option one is to delete the offending clause. Option two is to rename the file so it has an .html non-strict extension. That is, a.xhtml becomes a.html .
In trying to resolve this extension problem, I used the excellent open-source Web editor, Quanta Plus. It gave me a second opinion. Although it is not a WYSIWYG editor in the same sense as NVu is, Quanta Plus has many useful features and is worth keeping handy.
What I have been showing is NVu beta version 0.81. As such, it is not as stable or complete as it will be in its final release state. Some of the features that I feel currently are missing include:
Listing and validation of external links.
Listing of broken internal links.
A tree view of current set of pages.
A simple way of telling NVu that it is working off-line so it does not waste time trying to access the Web.
The ability to search Web sites for files and text within some or all of the Web's pages.
The ability to select which renderer to use.
I also encountered a few problem areas. For example, in the Publish Settings dialog, the Select Directory button referred to the local machine and not to the target or publishing server. Also, because I use Firefox, the internal chrome protocol is used fairly heavily. This version of NVu seems to treat uses of this protocol as errors, however. Finally, switching between display modes can be time-consuming.
NVu is an exciting new product that is trying to fill a void that now exists in the world of Linux applications. Try it out, and contribute if you can.
