Class Ext.form.HtmlEditor

Package:	Ext.form
Class:	HtmlEditor
Extends:	Field
Defined In:	HtmlEditor.js

Provides a lightweight HTML Editor component.

Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT supported by this editor.

An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within any element that has display set to 'none' can cause problems in Safari and FireFox.

Properties - Methods - Events - Config Options

Public Properties

Property		Defined By
	buttonTips : Object	HtmlEditor
	Object collection of toolbar tooltips for the buttons in the editor. The key is the command id associated with that b...	HtmlEditor

Public Methods

Method		Defined By
	applyTo(`String/HTMLElement/Element el`) : Ext.form.Field	Field
	Apply the behaviors of this component to an existing element. This is used instead of render().	Field
	cleanHtml(`String html`) : void	HtmlEditor
	Protected method that will not generally be called directly. If you need/want custom HTML cleanup, this is the method...	HtmlEditor
	createToolbar(`HtmlEditor editor`) : void	HtmlEditor
	Protected method that will not generally be called directly. It is called when the editor creates its toolbar. Overri...	HtmlEditor
	execCmd(`String cmd`, [`String/Boolean value`]) : void	HtmlEditor
	Executes a Midas editor command directly on the editor document. For visual commands, you should use relayCmd instead...	HtmlEditor
	getDocMarkup() : void	HtmlEditor
	Protected method that will not generally be called directly. It is called when the editor initializes the iframe with...	HtmlEditor
	getName() : String	Field
	Returns the name attribute of the field if available	Field
	getRawValue() : Mixed	Field
	Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.	Field
	getToolbar() : Ext.Toolbar	HtmlEditor
	Returns the editor's toolbar. This is only available after the editor has been rendered.	HtmlEditor
	getValue() : Mixed	Field
	Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa...	Field
	initComponent() : void	Field
	*	Field
	isDirty() : void	Field
	Returns true if this field has ben changed since it was originally loaded and is not disabled.	Field
	isValid(`Boolean preventMark`) : Boolean	Field
	Returns whether or not the field value is currently valid	Field
	pushValue() : void	HtmlEditor
	Protected method that will not generally be called directly. Pushes the value of the textarea into the iframe editor.	HtmlEditor
	relayCmd(`String cmd`, [`String/Boolean value`]) : void	HtmlEditor
	Executes a Midas editor command on the editor document and performs necessary focus and toolbar updates. This should ...	HtmlEditor
	reset() : void	Field
	Resets the current field value to the originally-loaded value and clears any validation messages	Field
	setRawValue(`Mixed value`) : void	Field
	Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.	Field
	setValue(`Mixed value`) : void	Field
	Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.	Field
	syncValue() : void	HtmlEditor
	Protected method that will not generally be called directly. Syncs the contents of the editor iframe with the textarea.	HtmlEditor
	toggleSourceEdit([`Boolean sourceEdit`]) : void	HtmlEditor
	Toggles the editor between standard and source edit mode.	HtmlEditor
	updateToolbar() : void	HtmlEditor
	Protected method that will not generally be called directly. It triggers a toolbar update by reading the markup state...	HtmlEditor
	validate() : Boolean	Field
	Validates the field value	Field

Public Events

Event		Defined By
	beforepush : (`HtmlEditor this`, `String html`)	HtmlEditor
	Fires before the iframe editor is updated with content from the textarea. Return false to cancel the push.	HtmlEditor
	beforesync : (`HtmlEditor this`, `String html`)	HtmlEditor
	Fires before the textarea is updated with content from the editor iframe. Return false to cancel the sync.	HtmlEditor
	change : (`Ext.form.Field this`, `Mixed value`, `Mixed value`)	Field
	Fires just before the field blurs if the field value has changed.	Field
	editmodechange : (`HtmlEditor this`, `Boolean sourceEdit`)	HtmlEditor
	Fires when the editor switches edit modes	HtmlEditor
	initialize : (`HtmlEditor this`)	HtmlEditor
	Fires when the editor is fully initialized (including the iframe)	HtmlEditor
	invalid : (`Ext.form.Field this`, `String msg`)	Field
	Fires after the field has been marked as invalid.	Field
	push : (`HtmlEditor this`, `String html`)	HtmlEditor
	Fires when the iframe editor is updated with content from the textarea.	HtmlEditor
	sync : (`HtmlEditor this`, `String html`)	HtmlEditor
	Fires when the textarea is updated with content from the editor iframe.	HtmlEditor
	valid : (`Ext.form.Field this`)	Field
	Fires after the field has been validated with no errors.	Field

Config Options

Config Options		Defined By
	createLinkText : String	HtmlEditor
	The default text for the create link prompt	HtmlEditor
	defaultLinkValue : String	HtmlEditor
	The default value for the create link prompt (defaults to http:/ /)	HtmlEditor
	enableAlignments : Boolean	HtmlEditor
	Enable the left, center, right alignment buttons (defaults to true)	HtmlEditor
	enableColors : Boolean	HtmlEditor
	Enable the fore/highlight color buttons (defaults to true)	HtmlEditor
	enableFont : Boolean	HtmlEditor
	Enable font selection. Not available in Safari. (defaults to true)	HtmlEditor
	enableFontSize : Boolean	HtmlEditor
	Enable the increase/decrease font size buttons (defaults to true)	HtmlEditor
	enableFormat : Boolean	HtmlEditor
	Enable the bold, italic and underline buttons (defaults to true)	HtmlEditor
	enableLinks : Boolean	HtmlEditor
	Enable the create link button. Not available in Safari. (defaults to true)	HtmlEditor
	enableLists : Boolean	HtmlEditor
	Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)	HtmlEditor
	enableSourceEdit : Boolean	HtmlEditor
	Enable the switch to source edit button. Not available in Safari. (defaults to true)	HtmlEditor
	fontFamilies : Array	HtmlEditor
	An array of available font families	HtmlEditor
	msgTarget : String	Field
	The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value Desc...	Field
	name : String	Field
	The field's HTML name attribute	Field
	readOnly : Boolean	Field
	True to mark the field as readOnly in HTML - Note: this only sets the readOnly attribute.	Field
	validationDelay : Number	Field
	The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)	Field
	validationEvent : String/Boolean	Field
	The event that should initiate field validation. Set to false to disable automatic validation. (defaults to "keyup")	Field
	value : Mixed	Field
	A value to initialize this field with	Field

Property Details

buttonTips

public Object buttonTips

Object collection of toolbar tooltips for the buttons in the editor. The key is the command id associated with that button and the value is a valid QuickTips object. For Example:


{
    bold : {
        title: 'Bold (Ctrl+B)',
        text: 'Make the selected text bold.',
        cls: 'x-html-editor-tip'
    },
    italic : {
        title: 'Italic (Ctrl+I)',
        text: 'Make the selected text italic.',
        cls: 'x-html-editor-tip'
    },
    ...

This property is defined by HtmlEditor.

Method Details

applyTo

public function applyTo(String/HTMLElement/Element el)

Apply the behaviors of this component to an existing element. This is used instead of render().

Parameters:

el : String/HTMLElement/Element
The id of the node, a DOM Node or an existing Element

Returns:

Ext.form.Field
this

This method is defined by Field.

cleanHtml

public function cleanHtml(String html)

Protected method that will not generally be called directly. If you need/want custom HTML cleanup, this is the method you should override.

Parameters:

html : String
return {String} The cleaned html

Returns:

void

This method is defined by HtmlEditor.

createToolbar

public function createToolbar(HtmlEditor editor)

Protected method that will not generally be called directly. It is called when the editor creates its toolbar. Override this method if you need to add custom toolbar buttons.

Parameters:

editor : HtmlEditor

Returns:

void

This method is defined by HtmlEditor.

execCmd

public function execCmd(String cmd, [String/Boolean value])

Executes a Midas editor command directly on the editor document. For visual commands, you should use relayCmd instead. This should only be called after the editor is initialized.

Parameters:

cmd : String
The Midas command
value : String/Boolean
(optional) The value to pass to the command (defaults to null)

Returns:

void

This method is defined by HtmlEditor.

getDocMarkup

public function getDocMarkup()

Protected method that will not generally be called directly. It is called when the editor initializes the iframe with HTML contents. Override this method if you want to change the initialization markup of the iframe (e.g. to add stylesheets).

Parameters:

None.

Returns:

void

This method is defined by HtmlEditor.

getName

public function getName()

Returns the name attribute of the field if available

Parameters:

None.

Returns:

String
name The field name

This method is defined by Field.

getRawValue

public function getRawValue()

Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.

Parameters:

None.

Returns:

Mixed
value The field value

This method is defined by Field.

getToolbar

public function getToolbar()

Returns the editor's toolbar. This is only available after the editor has been rendered.

Parameters:

None.

Returns:

Ext.Toolbar

This method is defined by HtmlEditor.

getValue

public function getValue()

Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.

Parameters:

None.

Returns:

Mixed
value The field value

This method is defined by Field.

initComponent

public function initComponent()

Parameters:

None.

Returns:

void

This method is defined by Field.

isDirty

public function isDirty()

Returns true if this field has ben changed since it was originally loaded and is not disabled.

Parameters:

None.

Returns:

void

This method is defined by Field.

isValid

public function isValid(Boolean preventMark)

Returns whether or not the field value is currently valid

Parameters:

preventMark : Boolean
True to disable marking the field invalid

Returns:

Boolean
True if the value is valid, else false

This method is defined by Field.

pushValue

public function pushValue()

Protected method that will not generally be called directly. Pushes the value of the textarea into the iframe editor.

Parameters:

None.

Returns:

void

This method is defined by HtmlEditor.

relayCmd

public function relayCmd(String cmd, [String/Boolean value])

Executes a Midas editor command on the editor document and performs necessary focus and toolbar updates. This should only be called after the editor is initialized.

Parameters:

cmd : String
The Midas command
value : String/Boolean
(optional) The value to pass to the command (defaults to null)

Returns:

void

This method is defined by HtmlEditor.

reset

public function reset()

Resets the current field value to the originally-loaded value and clears any validation messages

Parameters:

None.

Returns:

void

This method is defined by Field.

setRawValue

public function setRawValue(Mixed value)

Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.

Parameters:

value : Mixed
The value to set

Returns:

void

This method is defined by Field.

setValue

public function setValue(Mixed value)

Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.

Parameters:

value : Mixed
The value to set

Returns:

void

This method is defined by Field.

syncValue

public function syncValue()

Protected method that will not generally be called directly. Syncs the contents of the editor iframe with the textarea.

Parameters:

None.

Returns:

void

This method is defined by HtmlEditor.

toggleSourceEdit

public function toggleSourceEdit([Boolean sourceEdit])

Toggles the editor between standard and source edit mode.

Parameters:

sourceEdit : Boolean
(optional) True for source edit, false for standard

Returns:

void

This method is defined by HtmlEditor.

updateToolbar

public function updateToolbar()

Protected method that will not generally be called directly. It triggers a toolbar update by reading the markup state of the current selection in the editor.

Parameters:

None.

Returns:

void

This method is defined by HtmlEditor.

validate

public function validate()

Validates the field value

Parameters:

None.

Returns:

Boolean
True if the value is valid, else false

This method is defined by Field.

Event Details

beforepush

public event beforepush

Fires before the iframe editor is updated with content from the textarea. Return false to cancel the push.

Subscribers will be called with the following parameters:

this : HtmlEditor
html : String

This event is defined by HtmlEditor.

beforesync

public event beforesync

Fires before the textarea is updated with content from the editor iframe. Return false to cancel the sync.

Subscribers will be called with the following parameters:

this : HtmlEditor
html : String

This event is defined by HtmlEditor.

change

public event change

Fires just before the field blurs if the field value has changed.

Subscribers will be called with the following parameters:

this : Ext.form.Field
value : Mixed
The changed value
value : Mixed
The original value

This event is defined by Field.

editmodechange

public event editmodechange

Fires when the editor switches edit modes

Subscribers will be called with the following parameters:

this : HtmlEditor
sourceEdit : Boolean
True if source edit, false if standard editing.

This event is defined by HtmlEditor.

initialize

public event initialize

Fires when the editor is fully initialized (including the iframe)

Subscribers will be called with the following parameters:

this : HtmlEditor

This event is defined by HtmlEditor.

invalid

public event invalid

Fires after the field has been marked as invalid.

Subscribers will be called with the following parameters:

this : Ext.form.Field
msg : String
The validation message

This event is defined by Field.

push

public event push

Fires when the iframe editor is updated with content from the textarea.

Subscribers will be called with the following parameters:

this : HtmlEditor
html : String

This event is defined by HtmlEditor.

sync

public event sync

Fires when the textarea is updated with content from the editor iframe.

Subscribers will be called with the following parameters:

this : HtmlEditor
html : String

This event is defined by HtmlEditor.

valid

public event valid

Fires after the field has been validated with no errors.

Subscribers will be called with the following parameters:

this : Ext.form.Field

This event is defined by Field.