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).
name
'editize'
) As shown above, the name
attribute specifies what name should be used to submit the value in the
Editize field.ed
.name
= 'fieldname'; // Document will be submitted as 'fieldname'
width
'600'
) Specifies the width of the Editize
field. May be specified in pixels ored
.width
= '100%'; // Editize will stretch to 100%
height
'600'
) Same as width
, but specifies
the height of the Editize field.ed
.height
= '400'; // Editize will be 400 pixels in height
codebase
'.'
) 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. // Editize files may be found in the 'editize'
subfolder
// of the 'inc' folder in the site's root.
ed.codebase
= '/inc/editize';
display
display
; properties
set after calling display
will have no effect on the field. <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>
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
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
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
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
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
true
, the user can select paragraph styles from a drop-down
menu in the toolbar.headingstyle
true
, the Heading style is available in the paragraph
style dropdown.subheadingstyle
true
, the Subheading style is available in the paragraph
style dropdown.insetstyle
true
, the Indent and Outdent buttons will be available
in the toolbar.monospacedstyle
true
, the Monospaced style is available in the paragraph
style dropdown.paragraphalignments
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
true
, the user can create bullet lists with a button on
the toolbar.numberedlists
true
, the user can create numbered lists with a button
on the toolbar.boldtext
true
, the user can create bold text with a button on the
toolbar, or with a keyboard shortcut (Ctrl-B).italictext
true
, the user can create italic text with a button on
the toolbar.underlinetext
true
, the user can create underlined text with a button
on the toolbar, or with a keyboard shortcut (Ctrl-U).highlighttext
true
, the user can create highlighted text (<span
class="highlighted">
) with a button on the toolbar.inlinecode
true
, the user can create inline code (<code>
)
with a button on the toolbar, or with a keyboard shortcut (Alt-C).hyperlinks
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
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
true
, the user can create tables with a button on the
toolbar.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
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
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
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
'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
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
'#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
basefontface
for details. headfontsize
basefontsize
for details.headfontcolor
basefontcolor
for details. subheadfontface
basefontface
for details.subheadfontsize
basefontsize
for details.subheadfontcolor
basefontcolor
for details.insetfontface
basefontface
for details.insetfontsize
basefontsize
for details. insetfontcolor
basefontcolor
for details.monospacedbackgroundcolor
"#RRGGBB"
),
or as an HTML
standard color name.highlightcolor
'#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
'#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
// Provide two suggested link URLs for users
ed.linkurls[0]
= 'mailto:';
ed.linkurls[1]
= 'http://www.sitepoint.com/article.php/';
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
false
)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
"lic"
).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.endForm
</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).ns4support
property.