Learn Mimulus

Mimulus is an XHTML editor that works inside Firefox, written in Javascript. This document is a live example of Mimulus, so if you downloaded it to your hard drive along with mimulus.js, you'll be able to edit it. You'll have to have the Javascript file in the same directory as the HTML.

Start Editing

To start editing, you'll need to turn Firefox's "caret browsing" mode on. To do so, click somewhere on the document to make sure it's selected, and then press Ctrl+I. You can also press F7 to achieve the same effect (though it won't work on OS X), but if you use that then Mimulus won't update the status bar correctly, so Ctrl+I is recommended. Once you've turned caret browsing on, you should see a blinking cursor, i.e. the caret, inside the document. If you click around, you'll see that the cursor moves to wherever you click.

The status bar at the bottom of Firefox should tell you whether caret mode is on or not. If it doesn't, check Options -> Content -> Enable Javascript -> Advanced -> Change status bar text. If nothing works at all, check that you have Javascript enabled! If Javascript is enabled but still nothing works, check Tools -> Javascript Console for any errors.

To enter text, try clicking somewhere in this paragraph and just start typing. You can delete things and use arrow keys too. Note that deleting a selection doesn't work yet, nor do any of the clipboard facilities. To save the document, press Ctrl+S; Mimulus will confirm that the save has succeeded, and you can press Return or click OK to continue.

Inline Elements

To use the <em> element, press Ctrl+E whilst typing and everything you type thereafter will be emphasized like this. Note that this should be reflected in the status bar: "Caret mode on. Editing: em". To come out of emphasis mode, press Return. To use the <strong> element, you can use Ctrl+R, which will produce text like this. Again, Return quits.

Links can also be made in the same way, using Ctrl+L, but this time you'll get a Javascript prompt asking for the URI of the link location. You can also turn existing text into emphasisstrong emphasis, and links just by selecting it and then pressing the appropriate key combination.

To remove an inline element, make sure that the cursor is inside the element that you want to turn back into text, and then press Ctrl+Y. For example, that'd turn "this" back into "this".

Block Elements

To make a new paragraph element, <p>, if you're at the end of a current paragraph or other block level element you can press either Return or Ctrl+N. Try it: go to the end of this paragraph, and press Return. It should create a new blank paragraph underneath this one that you can then type into. It will also autosave the current document (see the Bugs! section for why).

All of the following block level elements can be used in the same way as <p>, i.e. by making sure you're at the end of the current block level element and then pressing the appropriate key combination. The only exceptions are that when inside a <pre> element, you can press the combinations at any time, except for Return which won't work anywhere inside a <pre> including at the end since that inserts newlines instead.

Additionally, using Ctrl+T you can toggle between a <p> and a <pre> element. Try it by selecting somewhere in this paragraph and pressing Ctrl+T a few times. Then try it on the following preformatted section:

Note how when switching back and forwards
it preserves the formatting, remembering 
where the line breaks are.

Again, don't forget that you can use Ctrl+N to exit from a <pre> section and create a new paragraph.

Bugs!

If you refresh the page or navigate away from it, all your changes are lost. For this reason, Mimulus currently autosaves upon every block level element creation. It would be better to get it to check when you move away from the document.

Deleting a list item doesn't work at the moment, and making a new paragraph when inside it is a little bit buggy too. That's actually kinda annoying, and I only found out in writing this document.

When editing at the very end of the screen, the cursor will go off of the bottom of the screen and Firefox won't follow it. This is kinda strange since when you use the arrow keys, Firefox does follow it, but there's probably a Javascript fix for it.

The cursor sometimes doesn't display properly in <pre> sections.

It's not possible to change the <title> using Mimulus yet.

The source isn't very pretty yet, and this probably will probably be better solved using an external tidying script rather than by messing around with text justification and so on within Mimulus itself.

Summary

Mimulus is good to use as a lightweight XHTML editor, editing lightweight XHTML documents. There's no support for <hr /> or <img /> or anything fancy like that, and there are still a few bugs as mentioned above; but if you're doing fairly heavy editing of a lot of notes, it can be a rather wonderful experience to just edit inside the browser quite transparently.

Another point is that Mimulus should preserve any additions such as stylesheets and images that you add using other editors, so it can be used in conjunction with other editors, or can be used on heavily templated pages. I'm mainly hoping to use it to take quick notes that ought to be formatted in HTML but would be tiresome to type up in emacs even using nxml-mode.

One quick tip: it's best to turn caret mode off again when browsing away from the document, either with F7 (if it works) or Ctrl+I. Otherwise you might end up with spurious carets all over the place, which seems to be a bug in Firefox. If you get these anyway, or other redrawing errors, you can try doing Ctrl+S to save the document, then F5 or Command+R to refresh the document.

Sean B. Palmer