Welcome to Mozile, the WYSIWYG XHTML editor for Mozilla! This document serves as an introduction for those interested in using and developing Mozile, and links to more specific information on the script files and functions that make Mozile work.

General Introduction

What is Mozile?

Mozile is an extension for Mozilla based browsers (including Firefox) which allows inline editing of XHTML pages. So Mozile is a plug-in which you install into your browser in order to extend its capabilities, making the browser into a special kind of web page editor.

Although Mozilla includes Composer, which allows you to create and edit web pages, Mozile does something different. Mozile allows you to edit pages inline, live on the web while you browse. Mozile allows you to edit part of a page, while Composer edits the whole page. And Mozile doesn't require a different window or a special text area, you just type right in the page.

You might be wondering if this is an important difference. Well, just try Mozile out and see. You'll wonder why nobody has done this before!

How does Mozile work?

The heart of Mozile is called eDOM, for Editable Document Object Model. The DOM is the structure that all HTML and XML documents have. What eDOM does is extend the DOM to allow the insertion and removal of text and tags. The rest of Mozile is there to make the power of eDOM easy to use. The buttons and menus on the Mozile toolbar can be configured to manipulate the DOM of the page you're editing in many different ways, some very much like a normal word processor, and some much more powerful. Mozile can add and remove tags, change one tag to another, and add, remove, and change attributes. This includes the style attribute in HTML, and Mozile can apply or change all sorts of different CSS styles.

We do our very best to make Mozile as customizable as possible, so you can control what buttons appear when the cursor is inside a particular tag, and what the buttons do to your editable pages. This is done through the use of Mozile Editing Schemes (MES), about which there's more below.

How do I start using Mozile?

First you have to install Mozile in your browser. Mozile will work in current versions of Mozilla and Firefox. Go to http://mozile.mozdev.org/use.html and click on the link to the Mozile XPI. You will be asked a few questions, and Mozile will be installed. Restart your browser in order for the installation to be completed. Now Mozile is installed!

Right away you should see the Mozile tool bar near the top of the browser window. The editing controls will appear here when you begin editing, but right now there isn't much to see. To try out Mozile go to http://mozile.mozdev.org and click in the editable box. After a short delay buttons will appear across the Mozile tool bar, and when you type the results will be entered into the page. It's that simple!

To use Mozile on one of your own web pages is only slightly more complicated. There are two options here:

Option 1: CSS CSS is the preferred way to enable Mozile, you just apply some special CSS properties to allow editing. Decide which tag you want to be the container for the editable area, like a <div> tag, and assign it the following CSS styles:

-moz-user-modify: read-write;
	-moz-user-input: enabled;
	-moz-user-select: normal;

Option 2: contentEditable You can also set the contentEditable attribute of the container tag to "true".

<div contentEditable="true">Text...<div>

You can now edit your page using Mozile. But if you want to get really fancy...

How do I configure Mozile?

Editing is nice, but you also be tell Mozile where and how it should save the page, and to specify what editing scheme should be used. Right now we use a method called Really Simple Detection (RSD) to configure Mozile, and like the name implies, there's nothing to it.

First you need to make an RSD file. RSD is just another flavor of XML, and you can see this web site for more details: http://archipelago.phrasewise.com/rsd. This is what an RSD file looks like.

<?xml version="1.0" ?> 
	<rsd version="1.0" zzxmlns="http://archipelago.phrasewise.com/rsd">
	<service>
		<engineName>Blog Munging CMS</engineName> 
		<engineLink>http://www.blogmunging.com/ </engineLink>
		<homePageLink>http://www.userdomain.com/ </homePageLink>
		<apis>
			<api name="Mozile Config" preferred="false" 
		     apiLink="http://mozile.mozdev.org/config" blogID="">
				<settings>
					<docs>http://www.conversant.com/docs/api/ </docs> 
					<notes>Additional explanation here.</notes>
					<setting name="method">file</setting> 
					<setting name="editonly">true</setting>
					<setting name="mes">XHTML</setting>
					<setting name="tagCSS">XHTML</setting>
				</settings>
			</api>
		</apis>
	</service>
	</rsd>

What you should focus on are the <setting> tags. There are four settings for Mozile, and here is what they do.

Method The "method" setting tells Mozile how it is supposed to save the page. We're always working on improving these saving methods and adding more. If you have a suggestion, please let us know. There are four methods available right now:

alert tells Mozile to open a window showing the source code for the page,
file tells Mozile to save the page to a file on the user's computer,
webdav tells Mozile to use WebDAV to save the file where it found it, on the server,
http tells Mozile to send the page back to the server using HTTP POST.

Edit Only The "editonly" setting can be "true" or "false". When it is "true" it tells Mozile that only the content of the editable area that the user is currently editing should be saved. When editonly is "false" then Mozile saves the whole page.

MES The "mes" setting tells the program what Mozile Editing Scheme it should use. The default is "XHTML", but if you enter a full URL for this setting then Mozile will try to use that MES file (more details below). For example:

<setting name="mes">http://mozile.mozdev.org/mes-XHTML.xml</setting>

tagCSS Mozile has a tag viewing mode, which uses CSS to mark the boundaries of the tags within the editable region. The default style sheet is "XHTML", but if you enter a full URL to your own style sheet Mozile will use it instead (more details below). For example:

<setting name="tagCSS">http://mozile.mozdev.org/tags-XHTML.css</setting>

What is a MES?

MES stands for Mozile Editing Scheme, and it's a kind of XML file that Mozile uses to control what commands are available to the user when editing different tags. Using a MES you can limit Mozile to just very basic or very rich editing, allowing it to apply the classes from a CSS sheet, an much more.

Each MES file has two main parts. The first is the commands list, and the second is the tags list.

Commands In this part of the MES all of the commands available to Mozile under this editing scheme are defined. Each one has its own <command> tag, with several important attributes. Here's an example:

<command 
	name="bold" title="Bold" tooltip="Make text bold"
	image="bold"
	type="toggleStyle"
	property="font-weight"
	value="bold"
	default="400" />

Here is an explanation for each attribute.

name is the name by which the command is known throughout the MES,
title is the name that's displayed to the user,
tooltip is the text of a tool tip for the command,
image is the name of the image file for the command (when it appears as a button,
type describes the type of command this is. In this case "bold" toggles a style on an off for the selected text,
property is the name of the CSS property to be toggled,
value is the value for the CSS property when it is toggled "on",
default is the value for the CSS property when it is toggled "off".

Tags In this part of the MES each of the available tags is defined, and the commands associated with it are listed. Here's an example:

<tag 
	name="p" title="Paragraph"
		>
	<commands>
		<command name="bold" accesskey="B" button="true" />
		<commandGroup name="fonts" title="Fonts" tooltip="Select font" icon="fonts" accesskey="F" button="true" >
			<command name="serif" accesskey="S"/>
		</commandGroup>
	</commands>
	</tag>

Here are the details:

name is the name of the tag, in lowercase,
title is the name which will be shown to the user,
command picks out the command, and gives it the following attributes:

name picks out the command by its name,
accesskey is used to access menu items with the keyboard,
button should be "true" if you want a button to be shown, and "false" if you only want a menu item to be shown.

commandGroup is used to group commands together into sub-menus. A commandGroup contains several commands, but has its own attributes much like a normal command, like title, tooltip, image, etc.

For more details on MES, look at content/mes/editingScheme.xml and the default MES content/mes/mes-XHTML.xml.

What is Tag View?

Tag View is a mode which Mozile can enter which uses CSS to mark the beginnings and endings of XML elements (tags). Mozile does this by applying a special styles sheet. The default is content/mes/tags-XHTML.css, but you can configure Mozile to use your own (see above). This is what you should start with (the "content" property is the most important):

a:before {
		content: '<a href="' attr(href) '">';
		border: 1px solid black;
		margin: 1px 1px 1px 1px;
		text-decoration: none;
		font: small monospace;
		color: white;
		background-color: gray;
	}
	a:after {
		content: "</a>";
		border: 1px solid black;
		margin: 1px 1px 1px 1px;
		text-decoration: none;
		font: small monospace;
		color: white;
		background-color: gray;
	}

By default Mozile shows the tags for the whole page. If you want to only show the tags for the editable area, you can try something like this. Assign your container tags to a single CSS class, like this:

<div class="mozileEditable">Text...</div>

In your custom tag view CSS change the selectors so that they only pick out elements which are descendants of the members of the new class:

*[class="mozileEditable"] a:before {
		...
	}
	*[class="mozileEditable"] a:after {
		...
	}

Now configure Mozile to use your custom CSS, and you're done.

Tell me more!

If you've tried Mozile out, read this far, and you still want to know more, then it's time to go to the next level. What you're asking for is to be inducted into the secrets of a Mozile developer. Truth be told, we don't keep many secrets...

Developer Documentation Read more pages like this one, detailing the code behind Mozile.

CVS Look at the Mozile source code: http://mozile.mozdev.org/source.html.

Mailing List Join or browse the Mozile mailing list: http://mozile.mozdev.org/list.html.

Contents