« XUL Reference home [ Examples | Attributes | Properties | Methods | Related ]

A frame which is expected to contain an editable document. Set the value of the editortype attribute to html to create an editor document. Mozilla provides two types of editors, the HTML editor and the plaintext editor. The editor does not provide any editing user interface; you would supply that yourself. However, text editing, image resizing, and table row and cell editing capabilities are provided. If you do not set the editortype attribute on an editor, you must enable editing using the makeEditable method.

To specify the document to load in the editor use the src attribute. However, an issue is that if you specify the src attribute initially on the editor tag in the XUL file, the document does not become editable by default. To enable editing on an editor, do either of the following:

  1. Set the src attribute on the editor after the outer window has loaded, for example, in the onload handler. You might also set the src attribute based on what the user selects from a file dialog. In this case, set the editortype attribute on the editor.
  2. Call the makeEditable method to make the document loaded in the editor editable.
  3. Enable the design mode of the document loaded in the editor.

To edit a new document, set the src attribute to about:blank.

To access most of the functionality of the editor, your application must be part of an extension or part of the chrome. XUL applications loaded via a URL from a web server will not be able to access most of the features of the editor.

See the Rich text editing and Midas pages for more information about Gecko's built-in rich text editor.

Attributes
editortype, src, type
Properties
accessibleType, commandManager, contentDocument, contentWindow, docShell, editingSession, editortype, webBrowserFind, webNavigation
Methods
getEditor, getHTMLEditor, makeEditable

Examples

This example shows how to made the editor editable by setting the designMode property of the loaded HTML document:

<script language="javascript">
function initEditor(){
  // this function is called to set up the editor
  var editor = document.getElementById("myEditor");
  editor.contentDocument.designMode = 'on';
}
</script>
<editor id="myEditor" editortype="html" src="about:blank" flex="1" type="content-primary"/>

Once editable, the document can have special formatting and other HTML pieces added to it using the document.execCommand method:

  var editor = document.getElementById("myEditor");

  // toggle bold for the current selection
  editor.contentDocument.execCommand("bold", false, null);

See the Midas overview for more command strings.

Attributes

editortype
Type: one of the values below
The type of editor to use. This value will be overridden depending on the content type of the document in the editor.
html
An HTML editor.
text
A plaintext editor.
src
Type: URI
The URI of the content to appear in the element.
type
Type: string
If set to the string content-primary, this editor becomes the primary content for the page. The window for the primary content can be retrieved more conveniently using window.content.

Properties

accessibleType
Type: integer
A value indicating the type of accessibility object for the element.
commandManager
Type: nsICommandManager
The command manager handles operations on the editor.
contentDocument
Type: document
This read-only property contains the document object in the element.
contentWindow
Type: TODO
Use the contentWindow.wrappedJSObject to obtain a DOM(html) window object
docShell
Type: nsIDocShell
This read-only property contains the nsIDocShell object for the document.
editingSession
Type: nsIEditingSession
The editing session for the editor which is used to initialize the editor. You would not normally need to use this.
editortype
Type: one of the values below
The type of editor to use. This value will be overridden depending on the content type of the document in the editor.
html
An HTML editor.
text
A plaintext editor.
webBrowserFind
Type: nsIWebBrowserFind
This read-only property contains an nsIWebBrowserFind object which can be used to search for text in the document.
webNavigation
Type: nsIWebNavigation
This read-only property contains the nsIWebNavigation object for the document. Most of its methods are callable directly on the element itself, such as goBack and goForward. It also contains the load constants used by reloadWithFlags and loadURIWithFlags.

Methods

getEditor( window )
Return type: nsIEditor
Returns the editing interface for the editor which contains numerous methods for manipulating the document. Pass the editor's contentWindow as the argument.
getHTMLEditor( window )
Return type: nsIHTMLEditor
Returns the HTML editing interface for the editor which contains methods for manipulating an HTML document. Pass the editor's contentWindow as the argument.
makeEditable( editortype, waitForLoad )
Return type: no return value
This function enables editing for an editor. Specify text or html as the editortype.

Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData
Interfaces
nsIAccessibleProvider