Rich-Text Editing in Mozilla:Class xbDesignMode

From MDC

Please note: This document is currently being migrated from another site. It is a work in progress and is not yet complete. --fumble 18:14, 24 Apr 2005 (PDT)

Contents 1 Synopis 2 Source 3 Introduction 4 Notes 5 Details 5.1 Properties 5.2 Methods 6 Examples 7 Original Document Information

[edit] Synopis

class xbDesignMode
{
public:

xbDesignMode(String aId);
xbDesignMode(HTMLElement aIFrameReference);

  // properties
  HTMLDocument mEditorDocument; 
  HTMLIFrame mIFrameElement;
  
  // methods
  void execCommand(string aCommandName, string aParam);
  void setCSSCreation(boolean aUseCss)
}

[edit] Source

• xbDesignMode.js

[edit] Introduction

With Mozilla 1.3, the Gecko engine now supports IE's designMode, which makes a document editable (see Rich-Text Editing in Mozilla).

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

[edit] 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

[edit] Details

[edit] Properties

mEditorDocument
reference to the document element of the rich-text widget

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

[edit] 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

[edit] 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.