The Editize™ JavaScript API Reference

This section of the manual documents in detail all the properties and methods of the Editize API for JavaScript.

To create an Editize object, load the Editize library:

<script language="JavaScript" src="path/to/editize.js"></script>

And then instantiate the Editize class:

var ed = new Editize();

You can then proceed to set properties and call methods on the object (ed in this example).

Basic Properties

name
(Default: 'editize') As shown above, the name attribute specifies what name should be used to submit the value in the Editize field.

E.g.: ed.name = 'fieldname'; // Document will be submitted as 'fieldname'
width
(Default: '600') Specifies the width of the Editize field. May be specified in pixels or
as a percentage of available width.
E.g.: ed.width = '100%'; // Editize will stretch to 100%
height
(Default: '600') Same as width, but specifies the height of the Editize field.

E.g.: ed.height = '400'; // Editize will be 400 pixels in height
codebase
(Default: '.') A relative or absolute URL. Specifies the directory where the Editize JAR files and license file(s) may be found. Editize may not work properly if its files are stored in a password-protected directory of your Web server (the user may be prompted, possibly repeatedly, for the username and password to access the files). By placing them in an unprotected directory and then setting this property to point to that directory, you can use Editize on password-protected pages.
E.g.:
// Editize files may be found in the 'editize' subfolder
// of the 'inc' folder in the site's root.
ed.codebase = '/inc/editize';

Basic Methods

display
Outputs the code for the Editize field as configured using this object's properties. The optional parameter allows you to specify the HTML code for the document that the field should display initially.
Important: You should set all the properties you want to configure Editize before calling display; properties set after calling display will have no effect on the field.
E.g.:
<form action="..." method="post">
  <script language="JavaScript">
    var ed = new Editize();
    ed.name = 'example';
    // ...set other properties here...
    ed.display('<p>Initial document. </p>');
  ?>
  <input type="submit" value="Submit" />
</form>

Feature Set Configuration Properties

The properties in this section may all be set to either true or false to enable or disable the feature in question.

E.g.: ed.paragraphstyles = false; // Disables paragraph styles

Unless otherwise indicated, these properties default to true.

about
If true, the pop-up menu in Editize will contain a "About Editize" menu item, which opens the Editize Web site in a new browser window when selected. If false, the menu item does not appear.
editbuttons
If true, the user has access to the standard edit features (cut, copy, paste, undo, redo) through buttons on the toolbar. If false, the buttons do not appear, but the features remain available through the pop-up menu and keyboard shortcuts.
codeview
This property defaults to false. If true, the user has access to a 'Code View' tab that displays the underlying HTML code of the document for direct editing.
formelementsallowed
This property defaults to false. If true, the user may insert form elements (including form, input, select and textarea tags) by pasting HTML content from the clipboard, or by typing them into the 'Code View' tab. Otherwise, these tags are stripped out when reading in HTML content.
paragraphstyles
If true, the user can select paragraph styles from a drop-down menu in the toolbar.
headingstyle
If true, the Heading style is available in the paragraph style dropdown.
subheadingstyle
If true, the Subheading style is available in the paragraph style dropdown.
insetstyle
If true, the Indent and Outdent buttons will be available in the toolbar.
monospacedstyle
If true, the Monospaced style is available in the paragraph style dropdown.
paragraphalignments
If true, the user can choose to make paragraphs (except for Monospaced paragraphs) Left, Center, or Right aligned. If false, all paragraphs are Left aligned.
bulletlists
If true, the user can create bullet lists with a button on the toolbar.
numberedlists
If true, the user can create numbered lists with a button on the toolbar.
boldtext
If true, the user can create bold text with a button on the toolbar, or with a keyboard shortcut (Ctrl-B).
italictext
If true, the user can create italic text with a button on the toolbar.
underlinetext
If true, the user can create underlined text with a button on the toolbar, or with a keyboard shortcut (Ctrl-U).
highlighttext
If true, the user can create highlighted text (<span class="highlighted">) with a button on the toolbar.
inlinecode
If true, the user can create inline code (<code>) with a button on the toolbar, or with a keyboard shortcut (Alt-C).
hyperlinks
If true, the user can create and remove hyperlinks with a button on the toolbar. The user may choose whether a link loads in the default window, or in a new window (<a href="..." target="_blank">).
images
If true, the user can create and edit images with a button on the toolbar. The user may provide an absolute or relative URL to the image file to be inserted. Relative URLs are resolved based on the baseurl property, described below.
tables
If true, the user can create tables with a button on the toolbar.

Display Properties

These properties let you configure Editize to display a document with the same character styles that you use on your site. In this way, the WYSIWYG editing interface presented by Editize can be made to exactly match the look the content will have when displayed as part of your site.

appletbgcolor
(Default: default system background color) Specifies the background color that should be displayed around the Editize applet. When the codeview feature is enabled, this property controls the color of the area surrounding the WYSIWYG and Code View tabs. When the showsubmitbutton feature is enabled, this property controls the color of the area surrounding the Java submit button. This does not affect the background color of the document displayed in the applet (see the bgcolor property below for that); only of the applet itself. The value is specified as an HTML color code ("#RRGGBB"), or as an HTML standard color name.
baseurl
(Default: none) Specifies the base URL for images and hyperlinks in the document. Typically, you should set this to the same base URL that the finished document will be displayed with on your Web site. For example, if the finished document will be displayed by http://www.mysite.com/site/content.asp, you should set the base URL to http://www.mysite.com/site/. By so doing, you can tell Editize to insert an image with the URL graphics/mylogo.gif and it will find the image file at http://www.mysite.com/site/graphics/mylogo.gif.
bgcolor
(Default: white) Specifies the background color that should be displayed within the text entry area of the Editize applet. The value is specified as an HTML color code ("#RRGGBB"), or as an HTML standard color name.
basefontface
(Default: 'Times New Roman') Specifies the font face for Normal text in the Editize form field. All other character and paragraph styles except Monospaced and Inline Code will inherit this font face by default as well. You may specify a single font family (e.g. 'Verdana'), or one of the following logical font names: 'Dialog', 'DialogInput', 'Monospaced', 'Serif', 'SansSerif', or 'Symbol'.
basefontsize
(Default: 16) Specifies the font size for Normal text in the Editize form field. All other character and paragraph styles except Heading and Subheading will inherit this font size by default as well. The value is specified as an integer in pixels.
basefontcolor
(Default: '#000000') Specifies the font color for Normal text in the Editize form field. All other character and paragraph styles except hyperlinks will inherit this font color by default as well. The value is specified as an HTML color code ("#RRGGBB"), or as an HTML standard color name.
headfontface
(Default: inherited) Specifies the font face for Heading style text in the Editize form field. See basefontface for details.
headfontsize
(Default: 32) Specifies the font size for Heading style text in the Editize form field. See basefontsize for details.
headfontcolor
(Default: inherited) Specifies the font color for Heading style text in the Editize form field. See basefontcolor for details.
subheadfontface
(Default: inherited) Specifies the font face for Subheading style text in the Editize form field. See basefontface for details.
subheadfontsize
(Default: 24) Specifies the font size for Subheading style text in the Editize form field. See basefontsize for details.
subheadfontcolor
(Default: inherited) Specifies the font color for Subheading style text in the Editize form field. See basefontcolor for details.
insetfontface
(Default: inherited) Specifies the font face for indented blocks in the Editize form field. See basefontface for details.
insetfontsize
(Default: inherited) Specifies the font size for indented blocks in the Editize form field. See basefontsize for details.
insetfontcolor
(Default: inherited) Specifies the font color for indented blocks in the Editize form field. See basefontcolor for details.
monospacedbackgroundcolor
(Default: none) Specifies the background color for Monospaced paragraphs. Generally used to shade code blocks to set them apart from the rest of the text. The value is specified as an HTML color code ("#RRGGBB"), or as an HTML standard color name.
highlightcolor
(Default: '#FF0000') For the highlighted text feature to work, you must specify a font color for highlighted text with this property. The value is specified as an HTML color code ("#RRGGBB"), or as an HTML standard color name.
linkcolor
(Default: '#0000FF') Specifies the text color for hyperlinked text in the Editize form field. The value is specified as an HTML color code ("#RRGGBB"), or as an HTML standard color name.
linkurls
(Default: empty array) Lets you provide a list of suggested link URLs, which will appear in the hyperlink dialog box in a drop-down list. Users can then select URLs from that list and then edit them if they wish, or type their own URLs from scratch as well.

E.g.:
// Provide two suggested link URLs for users
ed.linkurls[0] = 'mailto:';
ed.linkurls[1] = 'http://www.sitepoint.com/article.php/';

Special Purpose Properties

imglisturl

If this property is set to a URL, Editize will download a list of images from this address and present it to the user in the Insert Image dialog. The given URL may refer to a server-side script (e.g. to provide an up-to-date list of images stored in a content management system), but the output must be plain text of the following format:
url1 Description of the first image
url2 Description of the second image
url3 Description of the third image
...
Each line should contain a URL optionally followed by a description of the image. The description (if specified) will both appear in the image list and be used as the default value for the alt attribute if the image is selected. If no description is provided, the URL of the image will appear in the list instead.
ns4support
(Default: false)

If false, Editize fields will appear as standard <textarea> fields in Netscape 4.x browsers. If true, Editize fields will appear in Netscape 4.x browsers; but in order for these fields to submit properly, you must call the endForm method following the closing </form> tag.
licensefileext
(Default: "lic")

Allows you to specify the file extension that Editize uses when looking for its license file on your server. By default, Windows 2003 Server will prevent files with a .lic extension from being downloaded. If you encounter this issue, you can simply rename your Editize license file to, say editize.myhost.com.key and set this property to "key" so that Editize can find it.

Special Purpose Methods

endForm
This method must be called after the closing </form> tag on the page, or else HTML submit buttons (<input type="submit">) in the form will not be submitted to the server along with the rest of the form data when they are clicked in certain browsers (including Safari, Internet Explorer for Mac OS X, and Mozilla for Mac OS X).
When called, this method also ensures compatibility with Netscape 4.x browsers. You can then set Editize fields to appear in that browser using the ns4support property.