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:
- Set the
src
attribute on the editor after the outer window has loaded, for example, in theonload
handler. You might also set thesrc
attribute based on what the user selects from a file dialog. In this case, set the editortype attribute on the editor. - Call the
makeEditable
method to make the document loaded in the editor editable. - 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 usingwindow.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.
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
orhtml
as theeditortype
.
Related
- Interfaces
nsIAccessibleProvider