O'Reilly Network    
 Published on O'Reilly Network (http://www.oreillynet.com/)
 See this if you're having trouble printing code examples


Extending the Mozilla Editor

by Brian King
06/30/2000

Creating web sites has become much easier in part because the tools are much more powerful than those of just a few years ago. At the same time, hardware is now more robust and bandwidth wider, creating opportunities for more interactivity and animation on our sites. As many of these new tools move away from the traditional word processor interfaces into the realms of fully functional web authoring and publishing suites, some of you may wonder where this new tool called the Mozilla Editor fits into the picture.

I think there's definitely a place in cyberspace for this new tool. I'll give some background on the project and touch on its original design goals and capabilities. Then I'll discuss where the code base stands now and make my best-guess predictions for the direction I think the project is going.

A little Mozilla background

The Mozilla Editor is modeled on Netscape Composer, the editing module of the Communicator suite. The first Netscape HTML editor was introduced in 1996 and put the "Gold" in "Navigator Gold 2.0." Version 3.0 was available for Macintosh and Unix users. It was given the name "Composer" for Communicator 4.0. The functionality was used to create HTML-rich mail messages in the mail/news component.

Many of the goals from the earlier days still hold true for Mozilla. The Editor/Composer should:

Keeping it HTML-simple

Related Articles:

Tap the Power of Mozilla's User Style Sheets

Building a Game in Mozilla

With the advancement of more complex tools, what was once a clearly defined task -- putting information out for people to discover -- was being lost in a barrage of images, effects, sounds, and colors. These features have their place of course, but sometimes the information that's relevant gets buried beneath the special effects. A primary goal of the Mozilla Editor is to keep things simple. It is a WYSIWYG editor, with the feel of a traditional word processor.

As browser vendors have added proprietary tags to their spec in order to extend their capabilities, web page designers have been caught in the middle of these browser wars. HTML editing tools had to ultimately address this issue. Another cause of concern was the corruption of existing markup when opened in editing applications. Users found that finely tuned markup was mangled, sometimes beyond recognition, when opened in another editor. The Mozilla Editor seeks to address both of these issues.

Fig. 1 - The Mozilla Editor in "Show All Tags" mode

The Editor module has been completely rewritten, along with the rest of the Mozilla code base. For example, there's better table editing. You can select elements using Ctrl/Cmd/Shift keys and using the mouse click-and-drag combination. Once selected, you can easily add text formatting or background color (from a menu or toolbar color picker) and perform other operations.

The "Table Properties" dialog is also improved as compared to the 4.x version. Great effort was also made to comply with W3C standards. There was debate in the the layout newsgroup (there is an Editor newsgroup) concerning support for the Netscape <layer> element, but in the spirit of standards compliance, it was decided to drop support for it. The Editor outputs HTML 4.0 standard markup, except in the circumstance where the authors define their own tags. It's still tolerant of nonvalid markup, yet tries to "do the right thing" when possible.

How to fire up the Editor

If you want to play with the Editor, you have to install the entire Mozilla package. That's because the Editor uses many of the other modules, such as layout and xpfe, and therefore is very much integrated with the rest of the suite. Downloading a milestone build (the latest is M16) or a stable nightly build is recommended because it would be most up to date. You can launch the Editor (Composer) from the "Tasks" menu, which is available in the browser and is common to all the main Mozilla applications.

The Mozilla Editor is currently a tool for creating noncomplex, content-heavy web documents. It's also useful for playing directly with markup because of the new "HTML Source" mode. The tables support is excellent, as I touched upon earlier. But I would not, for example, use it for a forms-heavy site.

Unicode support is part of the project's overall commitment to internationalization. Mozilla is a great tool for creating multilingual documents, opening the door to a whole new, non-English-speaking user base. Currently, the Editor supports both Latin and Korean character insertions. This capability is also built into the user interface.

Cross-platform and areas of use

The Mozilla Editor runs on any platform that Mozilla runs on, which is quite a few. This capability becomes even more important if you decide to create your own editing application based on the Mozilla Editor -- something I will talk more about later in the article.

The Mozilla Editor enables cross-platform editing through its use of the "Gecko" layout engine for display in WYSIWYG mode, and with XPFE, a new technology to define your user interface (XPFE). In fact, the latter follows from the former because the layout engine is used for displaying HTML, XML, and Extensible User-Interface Language (XUL) files.

Functionality contained within the Editor module of the Mozilla source code is currently being used in other areas of the Mozilla package. Apart from Composer, the mail and news functions use it to compose HTML messages. It's also used in browser text fields and in certain form and text widgets contained in XUL files, the underlying technology of XPFE.

New features of the Editor

The Editor contains a new Image Map Editor, the functionality of which is written almost entirely in JavaScript. It contains an advanced edit facility for adding attributes, inline styles, or JavaScript events. I also like the different edit modes: Normal, Show All Tags, Edit Preview, and HTML Source. The first three are WYSIWYG features, with the "Show All Tags" mode displaying an image for each element with its name, and a "?" for user-defined tags. If you like to get down to the "nitty-gritty" of the markup, the source editing mode is a welcome addition.

Fig. 2 - The Image Map Editor in action

Extending the Editor

The editor code base is a collection of interfaces, rules, transactions, and event listeners that can manipulate parts of a document. The editing behavior uses a rules system to allow different rule sets for HTML (e.g., different DTDs) and text editing, although it is still not a straightforward procedure to plug in your own rules. Increasing the modularity is an ongoing goal for the Mozilla Editor team.

Many people have asked that the Editor evolve into an XML editing application. Increasing the modularity will also lay the groundwork for this functionality.

The editor core allows incredible flexibility for you to build your own editing applications, using the IDL interface provided. If you want to create a front end, it is now easier to build user interfaces through the combination of XUL, JavaScript, and CSS. The functionality for building your own editing applications is exposed through various non-xpidl interfaces that reside in mozilla/editor/public in the code base. The core methods, contained in nsIEditorShell, are available to a JavaScript calling application. This is made possible through a cross-platform IDL (xpidl) interface, which exposes the many editor methods to the calling program. Some examples of this are creating an instance of the Editor during start-up, loading documents, and saving documents.

In the next article, I'll take a closer look at some of these architectural features and delve into the technical details. For example, I'll try to shed some light on these questions:

Thank you to the Editor team for their help in writing this article. If you are interested in becoming involved, they are very approachable and would be delighted for you to help out.

Brian King is an independent consultant who works with web and open source technologies.


Discuss this article in the O'Reilly Network Browsers Forum.

Return to the O'Reilly Network Hub.

Copyright © 2009 O'Reilly Media, Inc.