Welcome to Mozile, the WYSIWYG XHTML editor for Firefox 1.5. 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.
Mozile is an extension for Mozilla based browsers (this is a version for Firefox 1.5) that allows inline editing of XHTML pages.
Mozile allows you to edit pages inline, live on the web while you browse. 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!
The heart of Mozile is called eDOM, for Editable Document Object Model. The DOM is the structure that all XHTML 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 XHTML, and Mozile can apply or change all sorts of different CSS styles.
We do our very best to make Mozile as customizable as possible; you can control which 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.
First you have to install Mozile in your browser. This version of Mozile will work Firefox 1.5. 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 toolbar near the top of the browser window. This contains a menu (Mozile options, help, etc) and some inactive toolbar buttons. The main editing controls only appear when you begin editing.
On the main Firefox menu click:
View » Toolbars » Customize...
and then drag the Mozile "Edit" button 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.
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.
By including the following meta tag in XHTML documents you can "wakeup" 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.
The Options Menu can be accessed from the Mozile toolbar at:
Mozile » Options
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.
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.
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.
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.
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. It is labelled as, "Allow text to be selected with the keyboard". 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.
There are several keyboard shortcuts available provided the "Allow override" option is checked. The command key (Ctrl) used depends on your platform: Control key for Windows, Meta key on the Mac.
Key combination | Command |
---|---|
Spacebar | single space character |
Spacebar repeated | alternate space and non-break space characters. |
Shift+Spacebar | single non-break space |
Shift+Enter | XHTML line break |
Tab |
enters a tab when the Style is white-space: pre
|
Ctrl+X | Cut |
Ctrl+Y | Paste |
Ctrl+Z | Undo |
Ctrl+Shift+Z | Redo |
Ctrl+S | Save with current settings. |
Ctrl+Shift+S | Show save dialog. |
Double Click Mozile | Toggle Mozile ON/OFF. |
Editing is nice, but you also need to 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 Discoverability (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.
Once you have the RSD file, save it in an accessible location and add the following tag
to the <head>
part of your XHTML page:
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="rsd.xml" />
If you have an XML page, you'll want to use this slightly strange method; in your CSS file add the following entry:
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 follow it to the configuration file.
That's it!
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#HowDoIConfigureMozile</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.
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.
The "saveMethod" setting tells Mozile how it is supposed to save the page. There are four methods available right now:
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.
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
(more details below). For example:
<setting
name="mes">http://mozile.mozdev.org/mes-XHTML.xml</setting>
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 (more details
below). For example:
<setting
name="tagCSS">http://mozile.mozdev.org/tags-XHTML.css</setting>
MES stands for Mozile Editing Scheme, and it's a kind of 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.
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" icon="bold" modifiers="accel" key="b" type="toggleStyle" property="font-weight" value="bold" default="normal" />
Here is an explanation for each attribute:
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" /> <commandGroup name="fonts" title="Fonts" tooltip="Select font" icon="fonts" accesskey="F" button="true" > <command name="arial" accesskey="A" /> <command name="courier" accesskey="C" /> <command name="times" accesskey="T"/> <command name="serif" accesskey="S"/> </commandGroup> </commands> </tag>
<tag name="h1" title="Heading 1" use="p" />
Here are the details:
<tag>
command
For more details on constructing a MES, look at these examples:
The default XHTML MES : content/mes/mes-XHTML.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.
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 (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.
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.
From the main Firefox menu select:
Tools » Extensions
then pick Mozile and press the Uninstall button.
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...
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 under development and is a complete rewrite of the Mozile 0.6 series as both an extension and server side version.
Look at the Mozile source code: http://mozile.mozdev.org/source.html.
Join or browse the Mozile mailing list: http://mozile.mozdev.org/list.html.
Come talk with us using Internet Relay Chat, at irc.freenode.net#mozile.
James A. Overton - http://mozile.mozdev.org -
2004-06-20
Max d'Ayala - 2006-03