Synopis

Source

xbDesignMode.js

See Also

• Rich-Text Editing in Mozilla 1.3

Introduction

With Mozilla 1.3, the Gecko engine now supports IE's designMode, which makes a document editable.

xbDesignMode is a JavaScript Object which provides a wrapper for the designMode feature which hides differences between IE and Mozilla.

Description

Notes

Script Location/Invocation

xbDesignMode takes the id of an iframe or a reference to an iframe element as its argument. For example:

Invocation using an id
var myDesignMode = new xbDesignMode("iframeID");

Invocation using an iframe element reference
var myIFrame = document.getElementById("iframeID");
var myDesignMode = new xbDesignMode(myIFrame);

Browser Support

Fully supports Mozilla 1.3+ and IE5.5

Properties

mEditorDocument

reference to the document element of the rich-text widget

mIFrameElement

reference to the iframe used as an rich-text editor.

Methods

xbDesignMode(String aID)

Constructs an instance of the xbDesignMode class.

Arguments:

String aID - id of the element that will become a rich-text editable widget. Needs to be an iframe.

Returns:

nothing

Throws:

Throws an exception if the element with the specified id isn't an iframe.

xbDesignMode(HTMLElement aIFrameReference)

Constructs an instance of the xbDesignMode class.

Arguments:

HTMLElement aIFrameReference - reference to the element that will become a rich-text editable widget. Needs to be an iframe.

Returns:

nothing

Throws:

Throws an exception if the passed in element isn't an iframe.

execCommand(string aCommandName, string aParam)

executes an command

Arguments:

String aCommandName - name of the command, such as "bold".

String aParam - optional parameter for specified command. Example is "insertimage", the optiona parameter would be the URI for the image to be used.

Returns:

nothing

setCSSCreation(boolean aUseCss)

Toggles CSS creation. Mozilla 1.3 automatically has it set to true. IE can only create markup, so this is only used by Mozilla.

Arguments:

boolean aUseCss - should CSS creation be used (<span style="font-weight:bold">) or should html tags be created (<b>).

Returns:

nothing

Examples

Support for Examples

Mozilla 1.3+ and IE5.5+ are supported.

General Examples

Simple editing interface passing in the id of the iframe

A simple rich text editing example using xbDesignMode.

Simple editing interface passing in a reference to the iframe

A simple rich text editing example using xbDesignMode.