HTML Editing Commands

Importing Editing Overlays

Editor allows the use of all the HTML editing functions in composer. In order to access these, a few changes need to be made to our editor, editor.js, editorOverlay.xul, and globalOverlay.xul need to be loaded and the HTML editing commands need to be initialized, giving us a XUL file like this: (some things have been trimmed)

<?xml version="1.0"?>
<?xul-overlay href="chrome://global/content/globalOverlay.xul"?>
<?xul-overlay href="chrome://editor/content/editorOverlay.xul"?>

<window>
<script src="chrome://editor/content/editor.js" type="application/x-javascript"/>
<script type="application/x-javascript">
<![CDATA[
  
  ...
  
  function Init() {
    
    ...
    
    SetupHTMLEditorCommands();
  }
]]>
</script>
  
...
  
</window>

Adding Editing Commands

Now we are ready to add HTML editing commands, we will do this using a toolbar and the keyboard shortcuts. The first thing that needs to done is importing the commands into the XUL document. To do this, add this after the <script> elements:

<commandset id="composerMenuItems"/>
<commandset id="composerStyleMenuItems"/>
<keyset id="editorKeys"/>

Not only does this expose the editing commands to the document, it also adds the keyboard shortcuts (via the keyset). You now should be able to hit ctrl-b, and type some text, and have it be bold, etc.

Building the Toolbar

Next we'll build the toolbar. The formatting toolbar from composer has some nice images already built in, so we'll use its buttons directly, by importing its stylesheet. To import the style sheet, add this below the communicator stylesheet:

<?xml-stylesheet href="chrome://editor/skin/editorFormatToolbar.css" type="text/css"?>

I created my toolbar like this:

<toolbox>
  <toolbar>
    <menulist id="ParagraphSelect"/>
    <box id="FormatToolbar">
      <toolbarbutton id="boldButton"/>
      <toolbarbutton id="italicButton"/>
      <toolbarbutton id="underlineButton"/>
      <toolbarseparator/>
    </box>
    <toolbarbutton id="linkButton"/>
  </toolbar>
</toolbox>

There are many other editing commands in editorOverlay.xul, so you can pick and choose those that you desire most.

Example 2

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

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://editor/skin/editorFormatToolbar.css" type="text/css"?>
<?xul-overlay href="chrome://global/content/globalOverlay.xul"?>
<?xul-overlay href="chrome://editor/content/editorOverlay.xul"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="Init();">

  <script src="chrome://editor/content/editor.js" type="application/x-javascript"/>
  <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");
      
      SetupHTMLEditorCommands();
    }
  ]]>
  </script>
  
  <commandset id="composerMenuItems"/>
  <commandset id="composerStyleMenuItems"/>
  
  <keyset id="editorKeys"/>
  
  <toolbox>
    <toolbar>
      <menulist id="ParagraphSelect"/>
      <box id="FormatToolbar">
        <toolbarbutton id="boldButton"/>
        <toolbarbutton id="italicButton"/>
        <toolbarbutton id="underlineButton"/>
        <toolbarseparator/>
      </box>
      <toolbarbutton id="linkButton"/>
    </toolbar>
  </toolbox>
  
  <editor type="content-primary" id="content-frame" src="about:blank" flex="1"/>

</window>

Download Example 2