Mozile : 0.6 Series for Firefox 2.0

Overview

Page Contents

  1. Introduction
  2. Installation
  3. Edit web pages
  4. Options
  5. RSD : Save/Edit configuration
  6. MES : Custom Toolbars
  7. Tag View
  8. Uninstall Mozile
  9. Further Information

Introduction

Mozile is an xhtml editing extension for the Firefox web browser. It allows "through the web" WYSIWYG editing of x/html web pages.

Summary of features

Installation

If you don't already have the Firefox browser, get the latest version and install it:
http://www.mozilla.com/firefox/
This version of Mozile will only work in Firefox version 2.0 and up.

Once you have Firefox installed you can add the Mozile Extension. Go to http://mozile.mozdev.org/use.html and click on the link to the latest 0.6 Series Mozile XPI. Firefox may give you a warning that you are trying to install an extension from an untrusted site. Ignore the warning and choose to install the extension. (There is a Firefox Security Option that will allow you to enter the mozile.mozdev.org web site as a trusted site.) Restart your browser in order for the installation to be completed.

Alternatively you can save the .xpi extension file to your computer desktop. Then open the Tools » Add-ons page and drag the .xpi file onto it. You will be asked if you want to install the extension.

When you restart the browser you will see the Mozile toolbar near the top of the browser window. This contains a menu (Mozile options, help, etc) and some inactive toolbar buttons. The main editing buttons and menus only appear when you begin editing.

Edit web pages

Edit the Web Mozile edit button

On the main Firefox menu click:
View » Toolbars » Customize...
and then drag the Mozile "Edit" button (shown above) onto the browser's toolbar. Now when you browse to any page and click "Edit" Mozile will make that page editable. Just click on some text and type away. No changes will be made to the original copy of the web page on the server, of course, but you can save the edited page to your own computer.

Alternatively click:
Mozile » Edit
and then choose to make the whole page editable. If the page already contains the contentEditable attribute to mark certain sections as editable then you can also choose to just make these editable.

Editable Pages

You can set up Mozile to start without requiring the user to click on the "Edit" button. What you need to do is add some special Cascading Style Sheet rules. 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;

Now if someone who has Mozile installed in their browser clicks inside that container tag, Mozile will start up and they can edit the page. Of course, saving is another matter - the user's changes won't affect the original web page. To make saving work, and do other fancy things, you'll have to configure Mozile.

Waking-up Mozile

By including the following meta tag in XHTML documents you can "wake-up" Mozile when the page is loaded by the browser:
<meta name="mozile" content="edit" />

If the toolbar is currently hidden it is displayed and any custom RSD and MES configuration files are immediately loaded so that editing can begin without delay.

The presence of the meta tag also prevents users from making the whole page editable. This is a safeguard should you wish to incorporate Mozile into a Content Management System. The source editing feature can also be disabled via a custom MES for similar reasons.

Options

The Options Menu can be accessed from the Mozile toolbar at:
Mozile » Options

Main options

Mozile detect and edit switched ON

While Mozile is enabled it will scan every document you load to see if it is editable. It is a good idea to switch Mozile OFF when you are not using it, for efficiency reasons, and to prevent any possible clashes with other extensions. Also, Mozile is still under development and there could be bugs that might affect normal browser operation.

Allow Mozile to override browser command keys

When you are within an editable area Mozile can make use of keyboard shortcuts for the Mozile toolbar, including those defined in the MES. Many common editing shortcuts, such as Ctrl+B for bold, will conflict with normal browser shortcuts unless they are overridden. Without this option you can only access commands by clicking on the toolbar buttons. This option also prevents left mouse clicks from activating hyperlinks; instead of jumping to a new location the caret is focused within the link text so that you can edit it.

Automatically hide the Mozile Toolbar

To always show the Mozile Toolbar leave this option unchecked. If selected, the toolbar is only shown when you click inside an editable area, or on page load for pages that have the Mozile wakeup meta tag.

Warn before leaving a page with unsaved changes

This option produces a warning message if you try to navigate away or close the page when there are unsaved changes. It is a good idea to always have this checked because there are a few error conditions that can cause this to happen unexpectedly.

Always show the editing caret (cursor)

Mozile uses the standard browser caret when you edit a page. It switches on and off the general Firefox preference accessibility.browsewithcaret.

Mozile always switches on the caret (by switching this preference on) when you start editing. When you click out of an editable area this option will decide if the caret is to be left on, or switched off. If this option is checked, the caret is always shown, even if you click on text that is not editable. When unchecked, the caret will only be shown within an editable area.

You should use the Mozile option to decide how the caret should normally be shown when you are not editing. You can set the same preference, accessibility.browsewithcaret, via the Firefox Advanced Options on the General tab. It is labelled as, "Always use the cursor keys to navigate within pages". However, because Mozile changes this preference every time you edit, it is of little use to you. If the caret is in the wrong state it can usually be toggled on and off with the F7 key.


MES - Mozile Editing Scheme

Default Mozile Editing Scheme

Pick the default MES you would like to use when you make a page editable by clicking on the Mozile "Edit" icon.

External Mozile Editing Scheme

If you want to use an MES that is not available from the list enter the URL of the custom MES in the "External MES" box. The URL can be that of a file on your local disk.

E.g. "file:///C:/My%20Documents/mozile/mes/mes-custom-en-UK.xml"

Finally, make sure you select the checkbox "Use as the default MES" to use the custom MES.

If the Default or External MES can not be found, or there is an error, the standard English-US XHTML MES will be used instead.


Debug

Mozile Debugging Level

Select the required Debugging Level. If debugging is disabled the Bug button is not shown on the toolbar.


RSD : Save/Edit configuration

The RSD configuration file contains save and edit conifguration options. This takes the form of a simple xml format, with or without the "RSD" options.

RSD stands for "Really Simple Discoverability" and the format allows services (such as blog engines) to automatically handle the saving of pages. For further information have a look at the RSD specification: http://archipelago.phrasewise.com/rsd.

The RSD file is made available to Mozile by adding a link to it in the <head> part of the xhtml document.

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="rsd.xml" />

An alternative method (useful for XML documents) is to place a link to the RSD file in a CSS declaration. The "background-image" property is used a convenient way to specifiy the location of the RSD file.

mozileconfiguration { background-image: url("rsd.xml"); }

In place of "rsd.xml" you can use a relative or a full URL pointing to your RSD file. When the user clicks inside an editable area on your page Mozile will look for this <link> tag and load the configuration file.

This is what an RSD file looks like.
[Note: "zzxmlns" is used due to namespace problems with the browser.]

<?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="123">
        <settings>
          <docs>http://mozile.mozdev.org/docs/mozileDocs.html</docs>
          <notes>Configuration options; refer to the docs for more detail.</notes>
          <setting name="mes">XHTML</setting>
          <setting name="tagCSS">XHTML</setting>
          <setting name="saveContent">current</setting>
          <setting name="saveMethod">display</setting>
          <setting name="httpSavePath">/mozile/save.php</setting>
        </settings>
       </api>
    </apis>
  </service>
</rsd>

The RSD file can be reduced to a simple XML file if you have no need for the Discoverability aspects of RSD.

<?xml version="1.0" ?>
<rsd>
  <settings>
    <setting name="mes">XHTML</setting>
    <setting name="tagCSS">XHTML</setting>
    <setting name="saveContent">current</setting>
    <setting name="saveMethod">display</setting>
    <setting name="httpSavePath">/mozile/save.php</setting>
  </settings>
</rsd>

What you should focus on are the <setting> tags. Here are some of the more important ones.

Save Content

The "saveContent" setting decides which part of the page is to be saved. It can be set to "page" or "current". When saveContent is "page" Mozile saves the whole page. When it is "current" Mozile only saves the content of the editable area that the user is currently editing.

Save Method

The "saveMethod" setting tells Mozile how it is supposed to save the page. There are four methods available right now:

HTTP Save Path

This is used with the "post" save method. It specifies the path and filename to which the POST data should be sent. This can be a relative or absolute URL.

MES

The "mes" setting tells the program which Mozile Editing Scheme to use. The default is "XHTML", but if you enter a URL for this setting Mozile will try to use that MES file. 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 URL to your own style sheet Mozile will use it instead. For example:
<setting name="tagCSS">http://mozile.mozdev.org/tags-XHTML.css</setting>

Other...

For a full list of configuration options refer to the RSD Configuration document.

MES : Custom Toolbars

MES stands for Mozile Editing Scheme, and it's an XML file that Mozile uses to control which 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.

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="Bold (Ctrl+B)"
  icon="bold" modifiers="accel" key="b"
  type="toggleStyle" property="font-weight" value="bold" default="normal"
/>

Here is an explanation for each attribute:

Tags

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

<tag name="p" title="Paragraph" unique="false">
  <commands>
    <command name="bold" accesskey="B" button="true"/>
    <command name="italic" accesskey="I" button="true"/>
    <command name="underline" accesskey="U" button="true"/>
    <command name="separator"/>
    <commandGroup name="text-align" title="Align" tooltip="Text alignment"
                  icon="justify-left" accesskey="A" button="true">
      <command name="left" accesskey="L"/>
      <command name="center" accesskey="C"/>
      <command name="right" accesskey="R"/>
      <command name="justify" accesskey="J"/>
    </commandGroup>
  </commands>
</tag>
<tag name="h1" title="Heading 1" use="p"/>

Here are the details:

Note that <command name="separator"/> is a special command. It can be used to add a toolbar or menu separator.

For more details on constructing a MES, look at these examples:
The default XHTML MES : content/mes/mes-XHTML-en-US.xml
A test XHTML MES : content/mes/mes-XHTML-test.xml

You can also define your own Unicode based character sets that will be made available to the user via the Special Characters dialog. Refer to the Developer documentation for further details.

Tag View

In Tag View mode Mozile applies a special style sheet to make visible the beginnings and endings of XML elements (tags). The default style sheet is content/mes/tags-XHTML.css, but you can configure Mozile to use your own via the RSD configuration file.

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.

One further point worth bearing in mind is that the :before and :after selectors won't work with some elements of empty content type. For XHTML this includes the <img/> and <br/> tags.

Uninstall Mozile

From the main Firefox menu select:
Tools » Add-ons
then pick Mozile and press the Uninstall button.

Close and then reopen Firefox to complete the uninstall procedure.

Further Information

Developer Documentation

More detailed documentation about the configuration of Mozile are included with the Developer version of the extension.

Note that there are other versions of Mozile. The 0.5 series was a server side version that has not been under development for a long time. The 0.7 Series is a complete rewrite of the 0.6 Series and is available in various versions, although none are feature complete. The 0.8 Series is under development and is a cross-browser server side only version.

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.

Additional test files and info

The Mozile 0.6 Series is currently maintained by Max d'Ayala. You can find various test files, other documentation and sometimes beta versions at:
www.dayala.co.uk/mozile/test/index.html
Email max=at=dayala.co.uk if you have any comments, suggestions, bug reports, etc.


Revisions to Mozile 0.6 Series by Max d'Ayala.
Original documentation by James A. Overton.