mozdev.org

Mozile (xhtml editing in your browser)    

resources:

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.

Documents

  1. Mozile Documentation - A General Introduction to Mozile
  2. Mozile Development - Notes on the Development of Mozile
  3. Mozile Content - Notes on the Code behind Mozile
  4. Mozile Locale - Notes on the Localization of Mozile
  5. Mozile Skin - Notes on the Styling of Mozile

Contents

  1. What Is Mozile?
  2. How does Mozile work?
  3. How do I start using Mozile?
  4. How do I configure Mozile?
  5. What is a MES?
  6. What is Tag View?
  7. How do I uninstall Mozile?
  8. Tell me more!

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!

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...

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.

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:

  • display tells Mozile to open a window showing the source code for the page,
  • local 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,
  • post tells Mozile to send the page back to the server using HTTP POST.

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>

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.

How do I uninstall Mozile?

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.

  1. First you have to know where Mozile is installed. It might be installed in the browser itself, on in your user profile, depending on the choices you made during its installation. Wherever Mozile is installed you will find the mozile.jar file or the mozile directory.
  2. If Mozile is installed in the browser itself, first find the browser's directory then the chrome directory. This will depend on your platform:
    • On MacOS X you will have to find the application ("Firefox.app" or "Mozilla.app") and tell Finder to "Show Package Contents". Then look in Contents / MacOS / chrome.
    • On Linux the browser could be anywhere, and if you don't know where to find it you might try "whereis mozilla" or "whereis firefox". Once you've found the main browser directory, look for the subdirectory named "chrome".
    • On Windows the browser is probably in "My Program Files" \ Mozilla (or Firefox), with the chrome folder right inside.
    • If you're using another platform, I'll assume you know where your towel is.
  3. If Mozile is installed in your user profile, you will have to find it first, and then the chrome directory. Things are made more difficult because with Firefox the profiles will be found under "Phoenix" (the name of the old version 0.6), and under both Mozilla and Firefox there is a directory which has a random string (like "xxxxxxxx.slt") as a name (don't ask...). Depending on your platform (see this page for more):
    • On MacOS X look in: Home / Library / [Phoenix or Mozilla] / Profiles / [profilename] / [random string] / chrome.
    • On Linux, look for a hidden folder in your user directory: ~ / [.phoenix or .mozilla] / [profilename] / [random string] / chrome.
    • On Windows it will depend on the version, so look at this page.
  4. That was the hard part. Now that you know where the chrome directory is, go there and delete the mozile.jar file or the mozile directory. Mozile is now gone from the system, but there are a few steps left.
  5. Delete the chrome.rdf file and the overlayinfo directory from the chrome directory. These files will be regenerated automatically when the browser restarts.
  6. If Mozile is installed in the browser itself (not the user profile), then open the installed-chrome.txt file in the chrome directory and remove every line which refers to "mozile". There should be three of them, and they will be near the bottom.
  7. Restart your browser.

Hopefully the new extension management system introduced in Firefox 0.9 will soon be added to Mozilla.

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: 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

The mozile project can be contacted through the mailing list or the member list.
Copyright © 2000-2017. All rights reserved. Terms of Use & Privacy Policy.