Note that the class attribute is added twice, because the class DOM attribute is recognized on IE but not on Firefox, and the className attribute is recognized on Firefox but not on IE.

Available Configuration Options

Additional configuration options are specified by passing a javascript object to the wysiwyg() function when it is first called on a textarea. Available keys are:

html

A string containing the source HTML code used inside the editor's iframe. This is a template where STYLE_SHEET and INITIAL_CONTENT are later replaced by the appropriate code for the editor instance, so those two strings must be present in this option.

css

A string containing the path to a CSS file which will be included in the editor's iframe.

debug

A boolean, enabling or disabling debugging.

autoSave

A boolean. If true, the editor will copy its contents back to the original textarea anytime it is updated. If false, this must be done manually.

rmUnwantedBr

A boolean. If true, the editor will not add extraneous <br> tags.

brIE

A boolean. If true, a <br /> will be inserted for a newline in IE.

controls

A javascript object specifying control buttons and separators to include in the toolbar. This can consist of built-in controls and custom controls. Controls are specified as key, value pairs in the javascript object, where the key is the name of the control and the value is another javascript object with a specific signature.

The signature of a control object looks like this:

{
// If true, this object will just be a vertical separator bar,
// and no other keys should be set.
separator: { true | false },
// If false, this button will be hidden.
visible: { true | false },
// Tags to use to wrap the selected text when this control is
// triggered.
tags: ['b', 'strong'],
// CSS classes to apply to selected text when this command is
// triggered.
css: {
textAlign: 'left',
fontStyle: 'italic',
...
},
// Function to execute when this command is triggered. If this
// key is provided, CSS classes/tags will not be applied, and
// any built-in functionality will not be triggered.
exec: function() { ... },
}

If you wish to override the default behavior of built-in controls, you can do so by specifying only the keys which you wish to change the behavior of. For example, since the strikeThrough control is not visibly by default, to enable it we only have to specify:

strikeThrough: { visible: true }

Additionally, custom controls may be specified by adding new keys with the same signature as a control object. For example, if we wish to create a quote control which creates <blockquote> tags, we could do specify this key: