View the latest version of these documents: http://mozile.mozdev.org/0.7/docs/index.html
Welcome to Mozile, the WYSIWYG XHTML editor for Mozilla! This document is supposed to be a design specification for the Mozile 0.7 series of releases, describing the function of the Mozile Core. However, it is far from being complete at this point in time, and much of what it does contain does not apply to the Mozile 0.7 series. It is a work in progress, and we welcome suggestions and contributions.
Mozile collection of JavaScripts which allow Mozilla based browsers (including Firefox) to edit XHTML and XML documents inside the browser.
There are plenty of web page editing programs out there, but Mozile is something different. Mozile allows you to edit pages inline, live on the web while you browse. Mozile allows you to edit almost any part of a page, while other editors affect the whole page or just a tiny box. Mozile doesn't require a different window or a special text area, you just type right in the page. Simple as that!
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 (Document Object Model) is the way that browsers represent the structure of HTML and XML documents. 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.
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!
But it gets better than that:
Edit the Web
If you're using Firefox you can click on "View" -> "Toolbars" -> "Customize..." and then drag the pretty "Edit" button on to 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! Of course, no changes will be made to the original copy of the web page -- Mozile can't be used to vandalize web sites, but you can save a copy of your changes to your computer. If you're using Mozilla or don't want to set up the "Edit" button, just click "Mozile" -> "Advanced" and then click on "Edit".
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;
-moz-user-select: normal;
Now if someone who has Mozile installed in their browser clicks inside that container tag, Mozile will start up and she 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...
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.
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"); }
For the in place of "rsd.xml" you can use a relative or a full URL (as of 0.611) 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.
<?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="saveContent">current</setting>
<setting name="saveMethod">local</setting>
<setting name="httpSavePath">/mozile/save.jsp</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.
Save Content
The "saveContent" setting decides what part of the page is to be saved. It can be set to "page" or "current". When saveContent is "page" then 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. 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:
HTTP Save Path
If the "post" save method is chosen, then this setting sets the path to which the document should be sent. Use an absolute URL.
MES
The "mes" setting tells the program what Mozile Editing Scheme it should use. The default is "XHTML", but if you enter a 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 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 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.
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:
For more details on MES, look at content/mes/editingScheme.xml and the default MES content/mes/mes-XHTML.xml.
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.
There are two ways to uninstall Mozile. If you are using Firefox version 0.9 of higher, then it is easy: select "Tools" -> "Extensions", then pick "Mozile" and press the "Uninstall" button. If you are using an older version of Firefox, or the Mozilla browser, things are more complicated.
Rather than uninstall the Mozile extension, in Firefox 0.8 or earlier you have the option of disabling it. In the Preferences window select "Extensions" then "Mozile XX" and click on the "Disable Extension" button. The browser will have to be restarted, but then it will be as if Mozile is not even there. You can enable Mozile again at any time, and Mozile will function as before once you restart your browser.
If you really want to uninstall Mozile, here are the necessary steps (adapted from this page). If you are the least bit nervous about this, I suggest you back up your application directory an profile.
Hopefully the new extension management system introduced in Firefox 0.9 will soon be added to Mozilla.
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: see Documents at the top of this page.
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.
IRC
Come talk with us using Internet Relay Chat, at irc.freenode.net#mozile.
James A. Overton - http://mozile.mozdev.org - 2004-06-20