Posted on by Mark Finkle

XUL Clippings – Midas Rich Text Editor

How to create a rich text or HTML WYSIWYG type editor in Mozilla has come up a few times so I thought a post was in order. Mozilla has a rich text editing system (called Midas) and an API similar to Internet Explorer’s. Mozilla, like Internet Explorer, supports the ability to make an entire document editable by setting the designMode property of the document object. Once in design mode, the document can be manipulated using various DHTML commands.

The API for interacting with the document is:

  • document.execCommand – Executes the given command.
  • document.queryCommandEnabled – Determines whether the given command can be executed on the document in its current state.
  • document.queryCommandIndeterm – Determines whether the current selection is in an indetermined state.
  • document.queryCommandState – Determines whether the given command has been executed on the current selection.
  • document.queryCommandValue – Determines the current value of the document, range, or current selection for the given command.

The most typical way to create a rich text editor in a XUL document is to use the element. In an HTML document, you would use the

You use JavaScript to turn on design mode:


var editor; /* global var */
function onload() {
  editor = document.getElementById("edit");
  editor.contentDocument.designMode = "on";
  setTimeout(function() { editor.contentWindow.focus(); }, 100);
}

window.addEventListener("load", onload, false);

You use the API to send commands to the document:


function toggleBold() {
  editor.contentDocument.execCommand("bold", false, null);
}

function toggleItalic() {
  editor.contentDocument.execCommand("italic", false, null);
}

function alignLeft() {
  editor.contentDocument.execCommand("justifyleft", false, null);
}

function alignRight() {
  editor.contentDocument.execCommand("justifyright", false, null);
}

I found a document that discusses the differences between the Mozilla and Internet Explorer rich editing systems.

I created simple XUL and HTML clippings to demonstrate the system. You can open the HTML clipping in a Mozilla compatible browser. You can download the XUL clipping and open it in XUL Explorer. Right-click on the link and pick “Save Link As” to save it to your machine.

midas-editor.xul
midas-iframe.html

6 Replies to “XUL Clippings – Midas Rich Text Editor”

  1. Can you explain how mature Midas is? I know it’s been around forever but is it stillbeing developed?

    What is the difference between Midas and Mozile, which seems to have received slow but steady development again over the last, say, 18 months.

    Is there any progress on standardising this functionality across browsers?

    Do you have a suggestion for a reliable ‘sniffing’ method to enable forking of such code between Mozilla browsers and others?

    What about character sets? The typical case is Word text being pasted into these WYSIWYG editors. The Windows 1252 proprietary characters are a PITA. Damn curly quotes to hell! LOL. Is there any Mozilla code/library that can be simply dropped in and will take care of normalising such pasted input?

    What about the fundamental elements Midas lacks such as support for HTML lists?

    Also, something has to be done with the copy/paste/cut security preference that severely limits Midas to semi-expert end users. Why not use the same methodology as extensions whereby if a cut/copy/paste is detected in a document with Midas enabled, a yellow information bar displays prompting the user to opt-in and allow the site to use this functionality?

    Don’t get me wrong Mark, thanks for the quick tute on Midas, but I think it’s a long way off being what it should be.

  2. “What about character sets? The typical case is Word text being pasted into these WYSIWYG editors. The Windows 1252 proprietary characters are a PITA. Damn curly quotes to hell! LOL. Is there any Mozilla code/library that can be simply dropped in and will take care of normalising such pasted input?”

    All strings in the DOM and JavaScript are stored internally as Unicode strings, and as Unicode is the end-all final answer to character encodings, different character sets are irrelevant. There is no need to normalise because curly quotes and ellipsis and em dashes are pretty and be better typology than what the average US-american keyboard / user inputs. Also, pretty much every language that is not English uses characters that are not part of the basic 127 ASCII characters that some English-focused developers take for granted, the plethora of encoding errors on the world wide web if you dare to use anything but those 127 be my witness. It’s saddening.

    By the way, if you want to replace certain characters with others, you can of course always traverse the DOM and replace them. I would suggest that instead of converting pretty typology to stupid ASCII characters, to do it the other way around so that this world will become a better place.

    Unicode must have world domination. Correct typography good. In the absence of Unicode, Windows 1252 semi-equalling ISO-8859-1 is still good because it includes characters for better typography. That is my rant.

    Correct me if I’m wrong :).

    ~Grauw

    p.s. Why the hell does Windows have ‘ and ’ as simple simple key-combinations, but not “ and ” (only giving me « and », which are French quotes, not Dutch ones).

  4. Anyway, what (in very rich language) I’m trying to say is, don’t try to “normalise” (sic) those type of paste-s, build your system with Unicode encoding, which is the right thing to do in the first place, and do not worry about such trivialities because even in an English-only environment ISO-8859-1 doesn’t cut it (it hasn’t got the € currency symbol for one), and English-only environments don’t exist on the internet.

    ~Grauw

  5. pd – Midas is a builtin HTML editing capability. I don’t know how active development is on Midas, but it is not a high priority. Midas is an effort to provide some “standard” means of rich editing inside the browser. The Midas API is very similar to Internet Explorer. Safari also includes the “execCommand” API.

    Blog engines, Wikis and other CMS type web pages can use the Midas features to provide rich editing suing a pseudo-standard API.

    With the Midas feature of adding raw HTML, it is possible to work around some of it’s current shortcomings.

    Mozile appears to be an addon extension for rich editing. I did not look long enough to see if the extension creates it’s own editor or uses Midas under the covers. In any case, Mozile is not a builtin capability of the browser.

Comments are closed.