A Minimal Editor

Getting Started

I will start with a basic, empty XUL file for this document, like this:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
</window>

Next, insert the <editor> element inside the <window> element, like this:

<editor type="content-primary" id="content-frame" src="about:blank" flex="1"/>

You shold be familiar with the id and flex attributes. The type attribute specifies how the editor is referenced when hooking up editing commands. Known valid types are "content-primary" and "content". The "content" type is used when multiple editor elements are being used in the same XUL document (more on this later). The src attribute is the page to load as default content.

Initializing

Even though editor is now in the document, you'll find that you won't be able to add any text. For that we need to initialize the element. The editor's HTML editing functionality relies on the editorShell property of the editor element. In order to use this functionality, the editorShell must be exposed globally and initialized via JavaScript. Add the following after the window element:

<script type="application/x-javascript">
<![CDATA[
  var editorShell; /* global var */
  
  function Init() {
    var editorElement = document.getElementById("content-frame");
    editorShell = editorElement.editorShell;
    editorShell.editorType = 'html';
    editorShell.webShellWindow = window.window;
    editorShell.contentWindow = window._content;
    editorShell.contentsMIMEType = "text/html";
    editorShell.LoadUrl("about:blank");
  }
]]>
</script>

Also edit the window element to call Init(); when the document
loads:
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="Init();">

Example 1

Now you should have a XUL document that looks like Example 1:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="Init();">

  <script type="application/x-javascript">
  <![CDATA[
    var editorShell; /* global var */
    
    function Init() {
      var editorElement = document.getElementById("content-frame");
      editorShell = editorElement.editorShell;
      editorShell.editorType = 'html';
      editorShell.webShellWindow = window.window;
      editorShell.contentWindow = window._content;
      editorShell.contentsMIMEType = "text/html";
      editorShell.LoadUrl("about:blank");
    }
    ]]>
  </script>
  
  <editor type="content-primary" id="content-frame" src="about:blank" flex="1"/>
</window>

Download Example 1

On to HTML Editing Commands.