IFRAME, or using a special mode. With Mozile you can just click in the page and start editing, like you're using a word processor.contentEditable attribute on an element, and then edit the contents. Firefox and other Mozilla browsers have a setting called designMode, which lets you edit the whole page, like the old Netscape Composer. The Internet Explorer method is missing some important features, like designMode won't let you pick which parts of a page are editable. But the worst part is that both of these methods are trapped in the last decade: they use out of date HTML code like font tags, and they have no idea what CSS is. You're limited to the small number of built-in editing commands.script tag to the head of your HTML page. The script tag should look like this:src attribute must be a valid path from the web page to Mozile's contentEditable attribute to true to make that element editable.
This paragraph is editable.
]]>mozile.editElements("editor") command to edit all elements with the class="editor" attribute. See the configuration section below for more configuration options.
This paragraph is editable.
]]>script element you can configure Mozile to suit your needs.mozile.root - Indicates where the mozile.useDesignMode - When true the document.designMode will be used in browsers that support it. When false designMode is not used, and Mozilla/Firefox users will have to press designMode the default is now false.mozile.alternateSpace - Set this to "\u00A0" (a non-breaking space) if you want Mozile to insert spaces every time the user presses the space bar. This makes Mozile behave more like a word-processor. If no mozile.alternateSpace is specified, Mozile will keep the HTML code clean and ignore extra spaces. See the notes on white space below for more details.mozile.emptyToken - By default this is set to "\u00A0" (a non-breaking space). In order to avoid display bugs, the empty token is automatically inserted into any empty element which has CSS display: block. See the notes on white space below for more details.mozile.help - The URL of a help page which will be opened by a help command. Defaults to mozile.debug.alertLevel and mozile.debug.logLevel - These can be set to "suppress", "warn", "inform", or "debug", in order from quietest to most verbose. They indicate what kinds of messages the user should be alerted to, and which should be logged. To turn off all messages use "suppress".mozile.defaultNS - Sets the default namespace URI. Should be null for HTML documents. For XHTML documents use "http://www.w3.org/1999/xhtml". For XML documents use the XHTML namespace or the default XML namespace.mozile.require(module name) - Makes sure that a Mozile module is loaded.mozile.editElement(element or id) - Makes a single element editable.mozile.editElements(list or class) - Makes a set of elements editable.mozile.editDocument() - Makes the whole document editable.mozile.protectElement(element or id) - Protects a single element from editing.mozile.protectElements(list or class) - Protects a set of elements from editing.mozile.useSchema(schema file) - Tells Mozile to use an RNG schema to structure editing. The schema file argument is either an absolute path or a relative path from mozile.root to the schema file.mozile.enableEditing(rich) - Enables editing without using an RNG schema. The rich argument can be false for basic text editing, and true for rich editing of elements. You probably want to use mozile.useSchema() mozile.enableEditing() but not both.mozile.root, which tells Mozile where to find the src attribute of the script tag which loaded mozile.root setting so that it points from the web page to the mozile.require(). It makes sure that the named module has been loaded into Mozile. If one module depends on others, the dependencies will be loaded automatically. If there is a module that you do not want to load, you can either remove the mozile.require() line, or you can "comment out" that module by adding // to the beginning of the line. The // tells JavaScript to ignore the rest of the line after the double-slash, treating it as a comment and not as code.mozile.editElement(), mozile.editElements() and mozile.editDocument() methods to determine which parts of the document are editable. You can call mozile.editElement() and mozile.editElements() as many times as you like, but it only makes sense to call mozile.editDocument() once.mozile.useSchema() and mozile.enableEditing() commands to determine how the document will be edited. It's better to use mozile.useSchema() when possible (see below) but sometimes the unstructured editing of mozile.enableEditing() is the right choice. There aren't many cases where you would want to use both of them.window.onload = function() { ... } block is used to specify code which is supposed to be executed only after the document has finished loading. It is usually best to put mozile.editElement(), mozile.editElements(), and mozile.useSchema() commands inside this block.mozile.save module. These save options are for web site designers to configure how Mozile works in their sites. In the future we plan to include more options for Mozile users to save their content.mozile.save.display, which takes the content of the document and displays it as source code using the mozile.gui.display() method. For the default HTML Toolbar GUI this means displaying the source in a new window. You can then copy and paste the source code as you like.mozile.save.post method uses XMLHttpRequest to send the content of the document to a web server using the HTTP POST operation.mozile.save.target - Indicates the node which should be saved. The default is document.mozile.save.format - Used to format the saved data. Can be "uppercase" or "lowercase", which will change the case of all tag names. Defaults to null which means no reformatting is done.mozile.save.warn - When true (the default) the user will be warned before she leaves a document with unsaved changes.mozile.save.method - Sets the method to be used by save operations.mozile.save.post.async - When true the POST is done asynchronously.mozile.save.post.uri - The URI to be POSTed to. Security restrictions on XMLHttpRequest require that the URI must be in the same domain as the web page it is called from.mozile.save.post.user - Optional. The name of the user to POST as.mozile.save.post.password - Optional. The password for the user.mozile.save.post.showResponse - When true the result of the POST operation will be displayed. This is meant to be used for debugging, and it defaults to false.mozile.save.save() or mozile.save.saveAs() methods, Mozile will execute the save() or saveAs() methods of the current mozile.save.module.mozile.save.Method class. You can also make use of the mozile.save.getContent() method, which takes a Node or a Document as its argument and returns a string representation.document.location to a URL which encodes the data, or by other means. Now the attacker has access to the user's cookie or login information, which may be used to hijack the user's account on the web site or to violate the user's privacy in other ways.script tags, src or onload attributes, or even in CSS with IE's expression statement. Not just JavaScript, but objects like Flash applets can also be used for XSS attacks. There's a wide variety of XSS attack vectors. Be very careful.mozile.gui module. If you have your own system for saving, disable the mozile.save module. The section on packaging Mozile below has more details.mozile.execCommand(name, arguments...) - Execute a Mozile command. For the list of available commands see mozile.edit.allCommands.mozile.edit.enable() and disable() - These turn Mozile editing on and off throughout the whole document.mozile.save.save() and saveAs() - Use Mozile's save system.mozile.dom.selection.get() - Gets a cross-browser selection object which behaves like the Mozilla Selection object.Object, and objects can have properties which are also objects. Properties are accessed using the common "dot" notation, so we can have a hierarchy of objects such as parentObject.childObject.grandchildObject.foo, where foo is some property. This looks a lot like the way packages are accessed in Java, for example, and for most of our purposes it behaves the same way.mozile object in the page, and all of the rest of our variables will be assigned as properties of the root mozile object or its descendants. We try to organize our code in a sensible way, like any code library would.mozile.dom object, which has as its children a bunch of properties like mozile.dom.TEXT_NODE, and a bunch of functions like mozile.dom.insertAfter() and mozile.dom.removeChildNodes(). (We often use "function" and "method" as synonyms, because the usual differences between them don't make as much sense in JavaScript as in other languages.)mozile.dom.TreeWalker. In this way modules can have sub-modules.mozile object itself is defined in mozile.loadModule() function is used to load other modules.mozile.require() and mozile.provide() statements. The mozile.require() call will make sure that an dependencies are loaded before the rest of the module is loaded. The mozile.provide() call indicates what properties and functions the module will provide, but currently it has no real effect.script tag with a src attribute which points to the mozile object and the basic functions required to load other modules. For example, mozile.load() uses XMLHttpRequest to get the text contents of files. mozile.findRoot() is used to set the mozile.root variable if it hasn't already been set. mozile.loadModule() translates a module name like "mozile.edit.InsertionPoint" into the file path "mozile.root/src/edit/InsertionPoint.js". Then it fetches the file using mozile.load() and uses the JavaScript eval() function to evaluate the contents of the loaded file as code.eval() function call is made inside the mozile.loadModule() function. Because of JavaScript's scope rules, a global variable foo defined in a JavaScript file mozile.loadModule, and not a global variable as might be expected. This is another good reason to always use the mozile object as a "namespace", since mozile.foo defined in mozile.foo, as expected.eval() function evaluates from the beginning of the string to the end. When a mozile.require() call is encountered, it is immediately executed. mozile.require() will call mozile.loadModule(), which uses mozile.findModule() to check whether the named module has been defined already. If "mozile.edit.InsertionPoint" is given, then mozile.findModule() will test whether mozile, mozile.edit, and mozile.edit.InsertionPoint are all defined. If any one of these is not defined, then the mozile.edit.InsertionPoint module will be loaded. Once the required module (and all of its requirements, and so on) have been loaded, the evaluation of the original string will continue.mozile.loadModule() or mozile.require() after this point to load modules dynamically, for example as part of a conditional statement. The mozile.load() function can be used to load other text files, although there are security limitations on the XMLHttpRequest system in most browsers which prevent loading files from web sites other than the one the page belongs to. For loading XML files you can also use the mozile.xml.load() function.mozile.root, and load the required modules dynamically. For example,Text nodes and Element nodes, and sometimes Attr or "attribute" nodes. Any text displayed in the document will belong to a text node, and text nodes are the children of elements. Elements can contain text nodes as well as other elements. (We usually use the words "element" and "tag" as synonyms.) Every node has a parent node, until we get to the "root" of the tree, which is the documentElement. In HTML this is the html element. The parent of the documentElement is the document object, and it has no parent.documentElement or the body or the contentEditable container, depending on the browser, but they also work their way toward the root.mozile.event.listen() method, called at the end of mozile.event.listen() only assigns listeners for some of these. If you have a command that you want triggered by a certain event type, make sure that that type is included by mozile.event.listen().mozile.event.handle(). mozile.event.handle() then does several things. It checks to see if the event took place in an editable area, which means that the original target node of the event has an ancestor with contentEditable="true" or it was marked as editable by mozile.editElement(). It can also pass the event to other functions and let them try to handle it. An event is "handled" when it triggers an appropriate action, like a command. Once the event is handled it will be cancelled using mozile.event.cancel(), and that will be the end of it. The event will stop moving through the DOM tree, and no other code will see it. If Mozile doesn't handle an event it will let the event keep travelling on its way.event.target property which indicates which node was clicked. Keyboard events don't have this property, so instead we determine the target node using the document's Selection object. The selection is displayed as a cursor or as highlighted text in the document.contentEditable attribute, or Firefox is in designMode, a cursor will appear. In Firefox you can also enable a cursor by pressing contentEditable and sometimes designMode. But that's all they are used for; the acutal editing operations are done using the DOM.Range object. Every selection contains at least one range, but a range does not have to be selected. The beginning and end points of a range or a selection are indicated by the pair of a node and an offset, which is an integer indicating where the point is within that node. In the case of a text node, the offset will be a number of characters, so you can select the third character of the text node. In the case of an element node, the offset will be the number of child nodes, so you can select the third child of the element node.mozile.event.handle() receives a keyboard event it looks for the current selection and uses the first node which contains both the start and the end of the selection as the target of the event. Once this is done, keyboard and mouse events are treated in the same way.mozile.edit.InsertionPoint (IP) object is related to ranges and selections. It also uses a node and an offset to indicate a location in the document. However, the insertion point code knows a lot more than the normal range and selection objects do about how to handle white space and which elements are allowed to contain text. So some of Mozile's code just uses the range and selection objects, while other code uses insertion points for finer control.mozile.event.handle() knows which node is the target of the current event, it needs to decide how to handle the event. Mozile is a context sensitive editor, which means that it's smart enough to tell the difference between editing a paragraph and editing a list, for example. We call this "structured editing"; Mozile knows about the way documents are structured, and helps maintain that structure as changes are made.a element:a element must have an href attribute, and that it's allowed to contain non-white-space text. It also refers to another definition named "Inline.model", which will have more details about what the a element is allowed to contain. RNG files can also contain Mozile Editing Schema information, which adds details about the commands associated with various elements. More about that below.mozile.event.handle() finds the target of an event, it looks for a RNG representation of that node. This will be a mozile.rng.Element object. If the node is a text node, it uses the parent element instead. Mozile stores all sorts of information from the RNG schema about the document's elements, and this includes what commands are associated with what kinds of elements.mozile.event.handle() takes an event, figures out the target node, and then figures out what mozile.rng.Element object matches up with the target node. Once it has this information, it calls the mozile.rng.Element.commands.trigger() method, and that method calls the commands associated with the mozile.rng.Element.mozile.edit.commands object. You can add a global command using mozile.edit.commands.addCommand().mozile.event.handle() first tries to use the RNG system, and if the event has not been handled it will test a set of default editing commands.mozile.edit.defaults object. You can add new ones using the mozile.edit.defaults.addCommand() method, and they are handled using the mozile.edit.defaults.trigger() method. However the easiest way to add a good selection of default editing commands is to use the mozile.enableEditing(rich) command in your configuration. If rich is false then only commands for inserting and removing text will be added as default editing commands. This means that elements cannot be created or destroyed, and only the text that they contain can be changed. If rich is true then text editing commands and commands for spitting, merging, and removing elements will be added.mozile.edit.Command "class", and several sub-classes with specialized functions. ("Class" is put in quotation marks because JavaScript doesn't have classes in the same sense that Java does. However, for most of our purposes they behave the same.) Commands can be executed and "unexecuted", so every editing operation can be done, undone, and redone. After undoing an editing command the document will be in exactly the same state as it was before you called the command in the first place.mozile.rng.Element objects, such as text or element insertion commands, or with the document as a whole, like the Undo and Redo commands. They can also be associated with the GUI. Every command has a unique name and all of the commands are stored in an associative array named mozile.edit.allCommands.respond() - given a change code, determines whether the command should be updated. See below for notes on change codes and the makesChanges and watchesChanges properties.isAvailable() - given an event, determines whether the command is available for use in the current editing context.isActive() - given an event, determines whether the command is active or disabled in the current editing context.test() - given an event or other arguments, determines whether the command can be executed.trigger() - takes an event and if the test is successful it executes the command. Use this method to activate a command as the result of a user event.request() - takes a state and some arguments and if the test is successful it executes the command. Use this method when calling one command from another command.prepare() - used to extract information from the event object and other arguments and store it in a mozile.edit.State object. The state object contains enough information for the command to be executed and unexecuted, and the state is stored by the undo system.execute() - takes the state object and does the actual work of manuipulating the document.unexecute() - takes the state object and undoes everything which execute() did, leaving the document exactly as it was.mozile.edit module defines a few basic text editing commands. The mozile.edit.rich module defines more primitive commands for editing text and elements. Very powerful commands can be created simply by combining these primitive commands. Here is a list of some commands built in to Mozile (they all belong to mozile.edit.*):insertTextremoveTextinsertNoderemoveNodemoveNoderemove removes combinations of text and elementsmergeNodessplitNodesplitNodesmozile.edit.*):Command is a generic commandCommandGroup groups commands together, but does not perform editing operations.Navigate moves the selection through the document.Split splits an element and its contents in two.Insert inserts either text or an element at the current selection.Wrap wraps the current selection inside one or more new elements.Unwrap removes a target element but keeps all the child nodes.Replace replaces a target element with a new element, without changing the child nodes.Style changes the CSS style of a target element.CommandGroup. When the groups has its trigger(event) method called, it passes the event to the trigger() method for each command in thr group. If one of the commands is triggered, then the command is executed and the resulting state object is returned. That state object is stored in the undo system by mozile.edit.done(). Then the event is cancelled so it won't trigger any more commands.mozile.edit.handle() keeps trying all of the ancestor nodes, until the event triggers a command or the ancestor is no longer inside an editable element. Then it tries the default commands in the mozile.edit.defaults CommandGroup. If the event isn't handled by any command then Mozile lets the it continue on its way.mozile.edit.State objects are very important for the command system. A command's prepare() method will prepare a new mozile.edit.State instance containing all of the information needed to execute and unexecute the command. When the command is executed the prepared state is sent to the command's execute() method and then stored by the undo system. When the command is undone, the state is sent to the unexecute() method. When the command is redone, the state is sent to the execute() method again.prepare() should almost always store references to nodes using their XPath addresses, which will stay the same, and not references to the node objects, which may change. Failure to do this can lead to strange bugs which only show up after a Redo operation.strong and em, while the block case includes p and div. Both of these are values of the CSS display property.p tag that contains a space character will look different than one that includes a non-breaking space character. Mozile handles this case using the mozile.emptyToken. By default this is set to the Unicode non-breaking space character \u00A0. When Mozile makes a change to a block element which removes all the non-white-space text, then an empty token will be inserted. If text is later added, the empty token is removed.mozile.alternateSpace setting. By default the value is null, and Mozile will ignore events which try to insert multiple consecutive spaces. A maximum of two consecutive spaces will be created by Mozile. This keeps the source code clean, but can cause some strange looking behaviour with the cursor around white space characers. If the alternateSpace is set to \u00A0 (or some other character), then Mozile will apply a somewhat complicated set of rules to insert space characters and alternate space characters when the user presses the space bar. Normally the two different characters will alternate, but sometimes two alternate space characters will be placed consecutively.headline tag, and a stylesheet would be used to display it as bold and in large font. This way both the person and the computer can easily pick out the headline.p paragraph you are allowed to insert strong and span tags, but not another p tag, or a script tag or an li tag. Doing so would violate the RNG schema for XHTML, and so Mozile doesn't allow it. Mozile doesn't even present the option.mozile.useSchema() function starts the parsing operation.mozile.rng module contains a number of classes. Every time a new schema is parsed, a new mozile.rng.Schema object is created. It loads the RNG file and then creates a new object for each RNG element it encounters. mozile.rng.Node is the parent class for these objects, and there is a sub-class for each element type available in RNG: mozile.rng.Element, mozile.rng.Text, mozile.rng.Choice, etc. So the parsing operation creates a new hierarchy of JavaScript objects which matches the hierarchy of RNG elements.mozile.rng.Node objects has a validate() method, which takes a node from the document and validates it against part of the RNG schema. The validation applies to the target node and all of its descendants. In this way we can validate the whole document or just pieces. Information about the validation operation is passed between objects by a mozile.rng.Validation object. The validation object is returned when the validation operation is complete. It has an isValid Boolean property which indicates whether the validation succeeded or failed. It also has report() and getFirstError() methods which can be used to get information about the validation operation once it is complete.mozile.rng.Node objects also provide methods, such as mustContain() and mayContain(), which we can use to determine what kinds of nodes are allowed by the RNG schema.mozile.rng.Element object is the most important. Validation, events, and editing commands all focus on the elements of the document.command - describes an editing command. This is the most important MES element.group -groups commands together. Associated with the mozile.edit.CommandGroup class.separator - divides commands.define - used like the RNG define element to group elements for reuse. Must have a name attribute.ref - used like the RNG ref element to refer to definitions. Must have a name attribute.define and ref elements, and it will follow RNG references as it searches for command elements. However the RNG parser will ignore all of the MES elements.mozile.useSchema() function is called, the RNG schema will be loaded and parsed. Mozile will create the RNG objects. Then it will run through the list of all the mozile.rng.Elements and for each one of these it will generate the appropriate commands and attach them. The command names must be unique, and Mozile will not generate a new command if the name is already taken.command and group tags can have the following attributes. All of them will become properties of the JavaScript Command object which is generated from the MES.name - a unique name which identifies the command or group among all the others. Should only contain alphanumeric characters.label - a short description which will appear on buttons and menu items.priority - a number which allows you to have some commands run before others. The default is 0, with higher numbers meaning higher priority. For example, insertText has priority 10. Negative values can be assigned. image - a path to an icon for the command in the tooltip - a longer description of the command or group.command tags:class - the name of a command class, as described above. When the MES is parsed by Mozile, a new instance of the class will be created. The default is Command.text - text content to be inserted by the Insert command. To specify Unicode characters, use this syntax: element is given it will be used instead.element - the tag name of an element to be created by Wrap, Insert, or Replace commands. Inside a script tag you can set this.element to an Element object.accel is an "accelerator" or keyboard shortcut combination. In order to work across platforms we usually use the "Command" keyword, which translates to makesChanges - a "change code" which indicates what kinds of change the command makes. Can be "none" if no changes are made; "state" if only the undo state is changed; "text" if only text node data is changed; or "node" which includes changes to elements and attributes. A "text" change includes a "state" change, and a "node" change includes both of these. The default value is "node".watchesChanges - indicates which change codes the command is sensitive to. The possible values are the same as those for makesChanges. The default is "node", which means that the command will update only when the node changes, and not on a "text" or "state" change. A "text" value means updates on "node" and "text" changes, but not "state" changes. A value of "none" indicates that this command never needs to update. This value is used by the respond() method to determine if a command's GUI representation should be checked for updates.remove - when true the Insert command will perform a remove operation before inserting, removing any contents of the selection. When false it will move the contents of the selection into the inserted element, which is useful for elements like links (a tags). The default is true.nested - when true the Wrap command will create wrappers inside other wrappers if told to do so. When false it will remove the wrapper if called inside another wrapper. The default is false.target - used by the Navigate, Split, Unwrap, Replace, and Style commands to determine which node will be manipulated. Values can be:
any - the first node found.text - the first text node found.element - the first element found.block - the first element which counts as a block-level element (usually because it has CSS display: block).localName [tagName] - the first element which has a local name matching the given tagName (matching is done lower case).script tag you can set this.target to a function which returns a node. Any time a target is used a direction can be specified.direction - used wherever target is used, this indicates the direction to use when searching for the target. Can be ancestor (the default), next, previous, or descendant.collapse - used by Navigate to determine whether the selection should be collapsed after it is moved. Can be null (the default), start, or end.copyAttributes - when true the Replace command will copy all of the attributes of the target element into the replacement element. When false it will not. The default is true.className - used t o set the class attribute of a created element.styleName - determines the CSS style to be set for a created element or for the Style command class.styleValue - determines the new CSS value to be set for a created element or for the Style command class.command elements can also have child elements. Both of these are optional, and no more than one of each should be included.element - the first child element inside the element tag will be used as a template. Commands like Wrap and Insert will clone this template and insert the clone into the document. Wrap will then append other elements as children of the clone. If you set the import attribute to true Mozile will copy the element into the current namespace -- this is important when dealing with HTML elements.script - can contain JavaScript code which will be evaluated inside the command object after it has been created and initialized. This allows you to customize the behaviour of the built-in Mozile command classes. Be careful of JavaScript scope rules, however. The this keyword will refer to the command object. We recommend including your JavaScript code as a CDATA section, as in the example below; this will avoid problems with the <, >, and & characters.span tag and use CSS to underline the text.mozile.edit.Wrap class to do most of the work. You can use the keyboard shortcut "Command-U" to trigger the command; on Windows and Linux this means span element and set the "text-decoration" style to "underline".element tag, with a few reservations.span element has the attribute xmlns="http://www.w3.org/1999/xhtml", which indicates that it is an XHTML element. However, since the import attribute is set Mozile will import a copy of the element into the current document and namespace, whatever that might be. When dealing with HTML document import is important! For XHTML and XML documents you may want to mix namespaces.mozile.gui.htmlToolbar.mozile.gui.Factory class. The mozile.event.handle() function passes events to the mozile.gui.update() function, which calls the update() method of whichever GUI Factory is assigned to mozile.gui.factory. You can change the GUI factory by calling destroy() on the current factory, and then setting mozile.gui.factory to the new factory.destroy() method hasn't been implemented.update() method takes the event and does whatever is needed to update the interface. It has access to the event object, which includes information about the target node. It can use the target node to lookup the appropriate RNG element, and discover its commands.mozile.dom, mozile.xml.mozile.dom module contains a number of functions that were written to bridge the gap between DOM implementations. Take a look at Mozile's API documentation for mozile.dom. The odds are that if some developer took the trouble to write a function for that module, then there must have been some cross-browser annoyance that prompted him to do it. You should take a look and consider using it in your code.mozile.xml module bridges the differences between browsers when it comes to things like parsing and serializing XML. It also holds a list of common XML namespaces in mozile.xml.ns./html[1]/body[1]/div[2]/p[3]/span[1]/text()[1]
html element, and the first body element which is a child of the html element. Then we want the second div in the body, the third p inside that div, the first span in the p, and the first text node in the span./xhtml:html[1]/xhtml:body[1]/xhtml:div[2]/mathml:math[3]
xhtml and mathml prefixes. That's about as complicated as it gets.mozile.xpath module, but most of the time we just use mozile.xpath.getXPath() to get the XPath address of a node, and mozile.xpath.getNode() to get a node from and XPath address. Any time we need to store a location in the document which might be changed, we store it using XPath.designMode. By setting document.designMode = "on" an HTML page will enter a mode which allows editing pretty much the same as the old Netscape Composer. Using document.execCommand() you can add font tags, etc. You can also resize images and tables. Most importantly, you get a cursor which you can use for editing the document.mozile.useDesignMode property is true, then Mozile will use designMode in order to get a cursor. No execCommand() calls are made, and designMode is turned off when outside an editable area.designMode hasn't seen nearly as much attention as other parts of Mozilla, and it has many bugs. The alternative is to use the "Caret Browsing" mode, which can be activated by the user by pressing accessibility.browsewithcaret. However, the former must be done manually, and the latter requires the UniversalXPConnect privilege, which is not given to remotely executed scripts (for good reason). Since designMode doesn't work in XHTML and XML documents, Caret Browsing is the only option. For XHTML and XML documents set mozile.useDesignMode = false.designMode, like Mozilla does, with all of its shortcomings. IE also supports the superior contentEditable attribute, which allows selected elements to be made editable while others are not. Mozile uses contentEditable in order to have a cursor for editing, but it does not use execCommand() to perform any of its editing operations. When contentEditable is enabled, IE uses different white space rules than the standard HTML and XML rules. In most ways this makes editing more convenient, and similar functionality has to be explicitly coded by Mozile for Mozilla.Text.prototype.foo(), and all text nodes will gain the foo() method. Text is treated as a normal JavaScript object with prototype-based inheritance. In IE this is not the case. Although prototyping of some DOM objects seems to be allowed, in general it is not. Prototyping of XML objects, for instance, is not permitted. Mozile 0.7 made extensive use of prototyping, adding methods like Node.isBlock(), which in many ways leads to more readable code. But Mozile 0.8 had to abandon this in favour of functions like mozile.edit.isBlock(node).TreeWalker object, and so Mozile provides one in mozile.dom.TreeWalker.Range and Selection objects. End points are specified by the pair of a node and an integer offset; this could be a text node and a number of characters, or an element and a number of child nodes.TextRange and a selection object. IE does not use pairs of nodes and points to indicate positions, just character offsets within an element. Since selections are critical for editing, a great deal of effort has been put in to wrapping the IE selection system in an interface which is compatible with the Mozilla system. See the mozile.dom.InternetExplorerRange and mozile.dom.InternetExplorerSelection modules. By accessing the window's selection using mozile.dom.selection.get() you can expect the selection object to behave according to the Mozilla model on all supported browsers.mozile.dom.InternetExplorerRange and mozile.dom.InternetExplorerSelection modules do not yet implement all of the Range and Selection methods. See the API documentation for details.null, undefined, Boolean, Number (a double), String, and Object. All of these data types are passed by value, except for Object which is passed by reference. Object is the most interesting type. There are many kinds of objects, including Array, Function, and Error. Objects work like dictionaries in other languages, with keys and values. The values can be any other data type, including other objects and functions. When we talk about an object foo and its "method" foo.bar() we mean that foo has a key named "bar" which has a function as a value. When we talk about foo's "property" foo.baz we mean that foo has a key "baz" with a value of some other data type (not a function).foo, and we set foo.a = "A". When there is no key the value will be undefined, so if we try to access foo.b or foo.c we will get undefined. However, we can create an object fud and set fud.a = "X" and fud.b = "B". Then we can set the prototype of foo to fud like this: foo.prototype = fud. Now we find that foo.a is "A", foo.b is "B", and foo.c is still undefined.foo's dictionary first, and if the desired key is found then the value is returned. If the key is not found, then JavaScript checks foo.prototype for another object and searches that object for the key. JavaScript will keep searching the fud.prototype, and so on along the chain of prototypes, until it finds a matching key or the chain ends. This is how inheritance works in JavaScript.Object: Array, Boolean, Date, Function, Math, Number, RegExp, and String. Array uses numeric indexes instead of (actually in addition to) keys, and works like you expect an array to work. Boolean, Number, and String can be used to create primitive values, and they also provide the properties and methods for the primitive types. Every function in JavaScript is a Function object.this keyword is special; it refers to the object in the current scope (more on scope in a moment). We also add another function named "getArea" to Rectangle.prototype. Then with the line var r = new Rectangle(2, 3) we create a new object and assign it to r. The new object becomes an "instance" of Rectangle because the Rectangle() function is executed as a constructor, assigning new properties to r. We can access r.width to get 2 and r.height to get 3, and we can call r.getArea() to get 6.Rectangle behaves like a class, and we use the new keyword to create instances of the class. The next step is to show how sub-classes work. We continue the example above, adding the following code:Square.prototype = new Rectangle, which establishes the chain of prototype-based inheritance. We also set Square.prototype.constructor = Square, to make it clear that the special constructor key, which is supposed to refer to the constructor function, refers to Square instead of Rectangle. After that we can create a new square and access the getArea() method using inheritance.window and document. When you refer to a variable inside a function, JavaScript will check a chain of scopes which works like the chain of prototypes. Variables are actually properties of the current function, which is an object like any other. First the JavaScript interpreter checks the current function for a variable with the matching name, then it checks the next function and the next until it finds the variable or reaches the global scope. If you declare a variable with the same name as one higher in the scope chain, JavaScript will think you want to use the original variable from the outer scope and overwrite it. foo._bar(), are intended to be private and should not be used outside the object that defines them.eval() to load much of the code aggravates the situation, because it means that the line numbers in most error messages are useless. There's no silver bullet, but there are some things that will make life easier.javascript.options.strict and javascript.options.showInConsole preferences to true. This tells the JavaScript interpreter to send warning messages when it notices undefined variables, or an = where == is expected, or useless expressions. It might help you catch a problem early. You can access the browser preferences by typing mozile.debug module (in mozile.debug.warn(), mozile.debug.inform(), and mozile.debug.debug() functions will log debugging messages and store them in mozile.debug.messages. By changing the mozile.debug.alertLevel and mozile.debug.logLevel you can decide which kinds of messages are displayed using alerts, which are silently logged, and which are ignored. The "Debug" command on the Mozile toolbar (shortcut "Command-D") will open a new window to display logged messages.eval(), which includes almost all of the Mozile code. One difficulty is that most of Mozile's functions are "anonymous" and the name of the object the function belongs to won't be displayed in "Pretty Print" mode. Tracking down the function in the source code may require some clever use of text search like the Unix grep command.assertTrue() and assertEquals(), which check to make sure that the target code is doing what it should be doing. The test runner displays a green bar, which gets longer as tests are completed. If even one test fails then the bar turns red and a message about the failed test is displayed.mozile.dom tests, which are stored in the [unit:dom/dom] test will be run. The test runner page loads, and it loads the mozile.require("mozile.dom"); lines are just the same as in any module. The var name = "mozile.dom.*"; line helps identify the test file in failure messages. The exposeTestFunctionNames() function returns an array with the names of all the test functions in this file.exposeTestFunctionNames() function is up-to-date, or your tests might not run.testIsHTML() test function is simple. It includes a conditional, which determines which test should be run, and then assertTrue() and assertFalse() statements which contain a brief message and tell the test runner what the result of the mozile.dom.isHTML(document) call should be. If the result does not match what is asserted, the test will fail and the test status bar will turn red./** indicates to JSDoc that it should pay attention to this comment. The first sentence describes the function. The @param statements indicate parameters (i.e. arguments) for the function. The {Node} entry tells JSDoc that the parameter's type is Node. The parameter also includes a name and description. Finally @type provides the return type of the function. Specifying a type in a dynamically typed language like JavaScript isn't always necessary, but it helps other developers to understand the code. The JSDoc homepage provides a full list of tags and their usage.-d option to set the destination directory: