# Yahoo! UI Library

### editor 2.5.0

Yahoo! UI Library > editor > YAHOO.widget.SimpleEditor

Show Private Show Protected

## Class YAHOO.widget.SimpleEditor - extends YAHOO.util.Element

Known Subclasses:
  YAHOO.widget.Editor

The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.

### Constructor

YAHOO.widget.SimpleEditor `( el , attrs )`

Parameters:
  `el <String/HTMLElement>` The textarea element to turn into an editor.
  `attrs <Object>` Object liternal containing configuration parameters.

### Properties

#### _alwaysDisabled `- private Object`

The Toolbar items that should ALWAYS be disabled event if there is a selection present in the editor.

#### _alwaysEnabled `- private Object`

The Toolbar items that should ALWAYS be enabled event if there isn't a selection present in the editor.

#### _baseHREF `- private String`

The base location of the editable page (this page) so that relative paths for image work.

#### _blankImageLoaded `- private Boolean`

Don't load the blank image more than once..

#### _contentTimer `- private object`

setTimeout holder for documentReady check

#### _contentTimerCounter `- private Number`

Counter to check the number of times the body is polled for before giving up

#### _defaultCSS `- String`

The default CSS used in the config for 'css'. This way you can add to the config like this: { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }

#### _defaultToolbar `- private Object`

Default toolbar config.

#### _disabled `- private Array`

The Toolbar items that should be disabled if there is no selection present in the editor.

#### _docType `- String`

The DOCTYPE to use in the editable container.

#### _fixNodesTimer `- private Date`

Holder for the fixNodes timer

#### _lastButton `- private Object`

The last button pressed, so we don't disable it.

#### _lastImage `- private HTMLElement`

Safari reference for the last image selected (for styling as selected).

#### _lastNodeChange `- private Date`

Flag to determine when the last node change was fired

#### _lastNodeChangeEvent `- private Event`

Flag to determine the last event that fired a node change

#### _mask `- private Object`

DOM Element holder for the editor Mask when disabled

#### _nodeChangeTimer `- private Number`

Holds a reference to the nodeChange setTimeout call

#### _rendered `- private Boolean`

Flag to determine if editor has been rendered or not

#### _selection `- private Object`

Holder for caching iframe selections

#### _semantic `- private Object`

The Toolbar commands that we should attempt to make tags out of instead of using styles.

#### _showingHiddenElements `- private Boolean`

Status of the hidden elements button

#### _tag2cmd `- private Object`

A tag map of HTML tags to convert to the different types of commands so we can select the proper toolbar button.

#### afterElement `- HTMLElement`

A reference to the H2 placed after the editor for Accessibilty.

#### beforeElement `- HTMLElement`

A reference to the H2 placed before the editor for Accessibilty.

#### browser `- Object`

Standard browser detection

#### CLASS_CONTAINER `- protected String`

Default CSS class to apply to the editors container element

#### CLASS_EDITABLE `- protected String`

Default CSS class to apply to the editors iframe element

#### CLASS_EDITABLE_CONT `- protected String`

Default CSS class to apply to the editors iframe's parent element

#### CLASS_NOEDIT `- protected String`

CSS class applied to elements that are not editable.

#### CLASS_PREFIX `- protected String`

Default prefix for dynamically created class names

#### currentElement `- Array`

A reference to the current working element in the editor

#### currentEvent `- Event`

A reference to the current editor event

#### currentFont `- HTMLElement`

A reference to the last font selected from the Toolbar

#### currentWindow `- Object`

A reference to the currently open EditorWindow

#### dompath `- HTMLElement`

A reference to the dompath container for writing the current working dom path to.

#### DOMReady `- private Boolean`

Flag to determine if DOM is ready or not

#### EDITOR_PANEL_ID `- String`

HTML id to give the properties window in the DOM.

#### editorDirty `- Boolean`

This flag will be set when certain things in the Editor happen. It is to be used by the developer to check to see if content has changed.

#### el `- object`

The issue here is that we have no way of knowing where the cursor position is inside of the iframe, so we have to place the newly inserted data in the best place that we can.

#### invalidHTML `- Object`

Contains a list of HTML elements that are invalid inside the editor. They will be removed when they are found. If you set the value of a key to "{ keepContents: true }", then the element will be replaced with a yui-non span to be filtered out when cleanHTML is called. The only tag that is ignored here is the span tag as it will force the Editor into a loop and freeze the browser. However.. all of these tags will be removed in the cleanHTML routine.

#### operaEvent `- private Object`

setTimeout holder for Opera and Image DoubleClick event..

#### sel `- object`

This work around traps the MouseUp event and sets a timer to check if another MouseUp event fires in so many seconds. If another event is fired, they we internally fire the DoubleClick event.

#### SEP_DOMPATH `- String`

The value to place in between the Dom path items

#### STOP_EXEC_COMMAND `- protected Boolean`

Set to true when you want the default execCommand function to not process anything

#### STOP_NODE_CHANGE `- protected Boolean`

Set to true when you want the default nodeChange function to not process anything

#### STR_BEFORE_EDITOR `- String`

The accessibility string for the element before the iFrame

#### STR_IMAGE_HERE `- String`

The text to place in the URL textbox when using the blankimage.

#### STR_LEAVE_EDITOR `- String`

The accessibility string for the element after the iFrame

#### STR_LINK_URL `- String`

The label string for the Link URL.

#### STR_TITLE `- String`

The Title of the HTML document that is created in the iFrame

#### toolbar `- YAHOO.widget.Toolbar`

Local property containing the YAHOO.widget.Toolbar instance

#### Properties inherited from YAHOO.util.Element:

`DOM_EVENTS`

#### Properties inherited from YAHOO.util.AttributeProvider:

`_configs`

#### Properties inherited from YAHOO.util.EventProvider:

`__yui_events, __yui_subscribers`

### Methods

#### _checkLoaded

`private void _checkLoaded ( )`
Called from a setTimeout loop to check if the iframes body.onload event has fired, then it will init the editor.

Returns: `void`

#### _cleanClassName

`private String _cleanClassName ( str )`
Makes a useable classname from dynamic data, by dropping it to lowercase and replacing spaces with -'s.

Parameters:
  `str <String>` The classname to clean up

Returns: `String`

#### _cleanIncomingHTML

`String _cleanIncomingHTML ( html )`
Process the HTML with a few regexes to clean it up and stabilize the input

Parameters:
  `html <String>` The unfiltered HTML

Returns: `String`
  The filtered HTML

#### _closeWindow

`private void _closeWindow ( )`
Override Method for Advanced Editor

Returns: `void`

#### _createCurrentElement

`private void _createCurrentElement ( tagName , tagStyle )`
This is a work around for the various browser issues with execCommand. This method will run `execCommand('fontname', false, 'yui-tmp')` on the given selection. It will then search the document for an element with the font-family set to yui-tmp and replace that with another span that has other information in it, then assign the new span to the `this.currentElement` array, so we now have element references to the elements that were just modified. At this point we can use standard DOM manipulation to change them as we see fit.

Parameters:
  `tagName <String>` (optional defaults to a) The tagname of the element that you wish to create
  `tagStyle <Object>` (optional) Object literal containing styles to apply to the new element.

Returns: `void`

#### _createIframe

`private Object _createIframe ( id )`
_createIframe

Parameters:
  `id <String>` The string ID to prefix the iframe with

Returns: `Object`
  iFrame object

#### _disableEditor

`private void _disableEditor ( disabled )`
Creates a mask to place over the Editor.

Parameters:
  `disabled <Boolean>` Pass true to disable, false to enable

Returns: `void`

#### _fixNodes

`private void _fixNodes ( )`
Fix href and imgs as well as remove invalid HTML.

Returns: `void`

#### _focusWindow

`private void _focusWindow ( onLoad )`
Attempt to set the focus of the iframes window.

Parameters:
  `onLoad <Boolean>` Safari needs some special care to set the cursor in the iframe

Returns: `void`

#### _getBlankImage

`private String _getBlankImage ( )`
Retrieves the full url of the image to use as the blank image.

Returns: `String`
  The URL to the blank image

#### _getDoc

`private Object _getDoc ( )`
Get the Document of the IFRAME

Returns: `Object`

#### _getDomPath

`private Array _getDomPath ( HTMLElement )`
This method will attempt to build the DOM path from the currently selected element.

Parameters:
  `HTMLElement <object>` el The element to start with, if not provided _getSelectedElement is used

Returns: `Array`
  An array of node references that will create the DOM Path.

#### _getRange

`private Object _getRange ( )`
Handles the different range objects across the A-Grade list.

Returns: `Object`
  Range Object

#### _getSelectedElement

`private HTMLElement _getSelectedElement ( )`
This method will attempt to locate the element that was last interacted with, either via selection, location or event.

Returns: `HTMLElement`
  The currently selected element.

#### _getSelection

`private Object _getSelection ( )`
Handles the different selection objects across the A-Grade list.

Returns: `Object`
  Selection Object

#### _getWindow

`private Object _getWindow ( )`
Get the Window of the IFRAME

Returns: `Object`

#### _handleAfterNodeChange

`private void _handleAfterNodeChange ( )`
Fires after a nodeChange happens to setup the things that where reset on the node change (button state).

Returns: `void`

#### _handleAlign

`private void _handleAlign ( o )`
Handles the alignment buttons in the toolbar.

Parameters:
  `o <Object>` Object returned from Toolbar's buttonClick Event

Returns: `void`

#### _handleAutoHeight

`private void _handleAutoHeight ( )`
Handles resizing the editor's height based on the content

Returns: `void`

#### _handleClick

`private void _handleClick ( ev )`
Handles all click events inside the iFrame document.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _handleColorPicker

`private void _handleColorPicker ( o )`
Handles the colorpicker buttons in the toolbar.

Parameters:
  `o <Object>` Object returned from Toolbar's buttonClick Event

Returns: `void`

#### _handleCreateLinkClick

`private void _handleCreateLinkClick ( )`
Handles the opening of the Link Properties Window when the Create Link button is clicked or an href is doubleclicked.

Returns: `void`

#### _handleCreateLinkWindowClose

`private void _handleCreateLinkWindowClose ( )`
Handles the closing of the Link Properties Window.

Returns: `void`

#### _handleDoubleClick

`private void _handleDoubleClick ( ev )`
Handles all doubleclick events inside the iFrame document.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _handleFontSize

`private void _handleFontSize ( o )`
Handles the font size button in the toolbar.

Parameters:
  `o <Object>` Object returned from Toolbar's buttonClick Event

Returns: `void`

#### _handleFormSubmit

`private void _handleFormSubmit ( ev )`
Handles the form submission.

Parameters:
  `ev <Object>` The Form Submit Event

Returns: `void`

#### _handleInsertImageClick

`private void _handleInsertImageClick ( )`
Opens the Image Properties Window when the insert Image button is clicked or an Image is Double Clicked.

Returns: `void`

#### _handleInsertImageWindowClose

`private void _handleInsertImageWindowClose ( )`
Handles the closing of the Image Properties Window.

Returns: `void`

#### _handleKeyDown

`private void _handleKeyDown ( ev )`
Handles all keydown events inside the iFrame document.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _handleKeyPress

`private void _handleKeyPress ( ev )`
Handles all keypress events inside the iFrame document.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _handleKeyUp

`private void _handleKeyUp ( ev )`
Handles all keyup events inside the iFrame document.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _handleMouseDown

`private void _handleMouseDown ( ev )`
Handles all mousedown events inside the iFrame document.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _handleMouseUp

`private void _handleMouseUp ( ev )`
Handles all mouseup events inside the iFrame document.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _handleToolbarClick

`private void _handleToolbarClick ( ev )`
This is an event handler attached to the Toolbar's buttonClick event. It will fire execCommand with the command identifier from the Toolbar Button.

Parameters:
  `ev <Event>` The event that triggered the button click

Returns: `void`

#### _hasParent

`private void _hasParent ( el , tag )`
_hasParent

Parameters:
  `el <HTMLElement>` The element to check
  `tag <String>` The tag that the element needs to be

Returns: `void`
  HTMLElement

#### _hasSelection

`private Boolean _hasSelection ( )`
Determines if there is a selection in the editor document.

Returns: `Boolean`

#### _initEditor

`private void _initEditor ( )`
This method is fired from _checkLoaded when the document is ready. It turns on designMode and set's up the listeners.

Returns: `void`

#### _isElement

`private Boolean _isElement ( el , tag )`
_isElement

Parameters:
  `el <HTMLElement>` The element to check
  `tag <String>` The tag that the element needs to be

Returns: `Boolean`

#### _isLocalFile

`private void _isLocalFile ( url )`
Checks to see if a string (href or img src) is possibly a local file reference..

Parameters:
  `url <String>` THe url/string to check

Returns: `void`

#### _isNonEditable

`private void _isNonEditable ( Event )`
Method is called at the beginning of all event handlers to check if this element or a parent element has the class yui-noedit (this.CLASS_NOEDIT) applied. If it does, then this method will stop the event and return true. The event handlers will then return false and stop the nodeChange from occuring. This method will also disable and enable the Editor's toolbar based on the noedit state.

Parameters:
  `Event <object>` ev The Dom event being checked

Returns: `void`
  Boolean

#### _listFix

`private void _listFix ( ev )`
Handles the Enter key, Tab Key and Shift + Tab keys for List Items.

Parameters:
  `ev <Event>` The event we are working on.

Returns: `void`

#### _render

`private void _render ( )`
Causes the toolbar and the editor to render and replace the textarea.

Returns: `void`

#### _renderPanel

`private void _renderPanel ( )`
Override Method for Advanced Editor

Returns: `void`

#### _selectNode

`private void _selectNode ( node )`
Places the highlight around a given node

Parameters:
  `node <HTMLElement>` The node to select

Returns: `void`

#### _setCurrentEvent

`private void _setCurrentEvent ( ev )`
Sets the current event property

Parameters:
  `ev <Event>` The event to cache

Returns: `void`

#### _setDesignMode

`private void _setDesignMode ( state )`
Sets the designMode of the iFrame document.

Parameters:
  `state <String>` This should be either on or off

Returns: `void`

#### _setEditorStyle

`void _setEditorStyle ( stat )`
Set the editor to use CSS instead of HTML

Parameters:
  `stat <Booleen>` True/False

Returns: `void`

#### _setInitialContent

`private void _setInitialContent ( )`
This method will open the iframes content document and write the textareas value into it, then start the body.onload checking.

Returns: `void`

#### _setMarkupType

`private void _setMarkupType ( action )`
This method will turn on/off the useCSS execCommand.

Parameters:
  `action <String>` The action to take. Possible values are: css, default or semantic

Returns: `void`

#### _setupAfterElement

`private void _setupAfterElement ( )`
Creates the accessibility h2 header and places it after the iframe in the Dom for navigation.

Returns: `void`

#### _swapEl

`private void _swapEl ( el , tagName , callback )`
This function will create a new element in the DOM and populate it with the contents of another element. Then it will assume it's place.

Parameters:
  `el <HTMLElement>` The element to swap with
  `tagName <String>` The tagname of the element that you wish to create
  `callback <Function>` (optional) A function to run on the element after it is created, but before it is replaced. An element reference is passed to this function.

Returns: `void`

#### _toggleDesignMode

`private String _toggleDesignMode ( )`
Toggles the designMode of the iFrame document on and off.

Returns: `String`
  The state that it was set to.

#### _updateMenuChecked

`private void _updateMenuChecked ( button , value , The )`
Gets the menu from a button instance, if the menu is not rendered it will render it. It will then search the menu for the specified value, unchecking all other items and checking the specified on.

Parameters:
  `button <Object>` The command identifier of the button you want to check
  `value <String>` The value of the menu item you want to check
  `The <YAHOO.widget.Toolbar>` Toolbar instance the button belongs to (defaults to this.toolbar)

Returns: `void`

#### _writeDomPath

`private void _writeDomPath ( )`
Write the current DOM path out to the dompath container below the editor.

Returns: `void`

#### cleanHTML

`String cleanHTML ( html )`
Process the HTML with a few regexes to clean it up and stabilize the output

Parameters:
  `html <String>` The unfiltered HTML

Returns: `String`
  The filtered HTML

#### clearEditorDoc

`void clearEditorDoc ( )`
Clear the doc of the Editor

Returns: `void`

#### closeWindow

`void closeWindow ( )`
Override Method for Advanced Editor

Returns: `void`

#### cmd_backcolor

`void cmd_backcolor ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('backcolor') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_createlink

`void cmd_createlink ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('createlink') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_fontname

`void cmd_fontname ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('fontname') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_fontsize

`void cmd_fontsize ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('fontsize') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_forecolor

`void cmd_forecolor ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('forecolor') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_inserthtml

`void cmd_inserthtml ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('inserthtml') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_insertimage

`void cmd_insertimage ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('insertimage') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_insertorderedlist

`void cmd_insertorderedlist ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('insertorderedlist ') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_insertunorderedlist

`void cmd_insertunorderedlist ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('insertunorderedlist') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### cmd_list

`void cmd_list ( tag )`
This is a combined execCommand override method. It is called from the cmd_insertorderedlist and cmd_insertunorderedlist methods.

Parameters:
  `tag <object>` The tag of the list you want to create (eg, ul or ol)

Returns: `void`

#### cmd_unlink

`void cmd_unlink ( value )`
This is an execCommand override method. It is called from execCommand when the execCommand('unlink') is used.

Parameters:
  `value <object>` Value passed from the execCommand method

Returns: `void`

#### destroy

`Boolean destroy ( )`
Destroys the editor, all of it's elements and objects.

Returns: `Boolean`

#### execCommand

`void execCommand ( action , value )`
This method attempts to try and level the differences in the various browsers and their support for execCommand actions

Parameters:
  `action <String>` The "execCommand" action to try to execute (Example: bold, insertimage, inserthtml)
  `value <String>` (optional) The value for a given action such as action: fontname value: 'Verdana'

Returns: `void`

#### filter_all_rgb

`void filter_all_rgb ( String )`
Converts all RGB color strings found in passed string to a hex color, example: style="color: rgb(0, 255, 0)" converts to style="color: #00ff00"

Parameters:
  `String <object>` str The HTML string to filter

Returns: `void`
  String

#### filter_internals

`void filter_internals ( String )`
Filters internal RTE strings and bogus attrs we don't want

Parameters:
  `String <object>` html The HTML string to filter

Returns: `void`
  String

#### filter_invalid_lists

`void filter_invalid_lists ( String )`
Filters invalid ol and ul list markup, converts this:

..

to this:
- ..

Parameters:
  `String <object>` html The HTML string to filter

Returns: `void`

#### filter_rgb

`void filter_rgb ( String )`
Converts an RGB color string to a hex color, example: rgb(0, 255, 0) converts to #00ff00

Parameters:
  `String <object>` css The CSS string containing rgb(#,#,#);

Returns: `void`
  String

#### filter_safari

`void filter_safari ( String )`
Filters strings specific to Safari

Parameters:
  `String <object>` html The HTML string to filter

Returns: `void`
  String

#### getEditorHTML

`void getEditorHTML ( )`
Gets the unprocessed/unfiltered HTML from the editor

Returns: `void`

#### hide

`void hide ( )`
This method needs to be called if the Editor is to be hidden (like in a TabView or Panel). It should be called to clear timeouts and close open editor windows.

Returns: `void`

#### init

`void init ( )`
The Editor class' initialization method

Returns: `void`

#### initAttributes

`void initAttributes ( attr )`
Initializes all of the configuration attributes used to create the editor.

Parameters:
  `attr <Object>` Object literal specifying a set of configuration attributes used to create the editor.

Returns: `void`

#### moveWindow

`void moveWindow ( )`
Override Method for Advanced Editor

Returns: `void`

#### nodeChange

`void nodeChange ( force )`
Handles setting up the toolbar buttons, getting the Dom path, fixing nodes.

Parameters:
  `force <Boolean>` Optional paramenter to skip the threshold counter

Returns: `void`

#### openWindow

`void openWindow ( )`
Override Method for Advanced Editor

Returns: `void`

#### post_filter_linebreaks

`void post_filter_linebreaks ( String )`
HTML Pre Filter

Parameters:
  `String <object>` html The HTML to filter
  `String <object>` markup The markup type to filter to

Returns: `void`
  String

#### pre_filter_linebreaks

`void pre_filter_linebreaks ( String )`
HTML Pre Filter

Parameters:
  `String <object>` html The HTML to filter
  `String <object>` markup The markup type to filter to

Returns: `void`
  String

#### render

`void render ( )`
Calls the private method _render in a setTimeout to allow for other things on the page to continue to load.

Returns: `void`

#### saveHTML

`void saveHTML ( )`
Cleans the HTML with the cleanHTML method then places that string back into the textarea.

Returns: `void`
  String

#### setEditorHTML

`void setEditorHTML ( html )`
Loads HTML into the editors body

Parameters:
  `html <String>` The html content to load into the editor

Returns: `void`

#### show

`void show ( )`
This method needs to be called if the Editor was hidden (like in a TabView or Panel). It is used to reset the editor after being in a container that was set to display none.

Returns: `void`

#### toString

`String toString ( )`
Returns a string representing the editor.

Returns: `String`

#### Methods inherited from YAHOO.util.Element:

`_registerHTMLAttr, addClass, addListener, appendChild, appendTo, fireQueue, getElementsByClassName, getElementsByTagName, getStyle, hasChildNodes, hasClass, initAttributes, insertBefore, on, removeChild, removeClass, removeListener, replaceChild, replaceClass, setStyle, subscribe`

#### Methods inherited from YAHOO.util.AttributeProvider:

`configureAttribute, fireBeforeChangeEvent, fireChangeEvent, get, getAttributeConfig, getAttributeKeys, refresh, register, resetAttributeConfig, resetValue, set, setAttributeConfig, setAttributes`

#### Methods inherited from YAHOO.util.EventProvider:

`createEvent, fireEvent, hasEvent, subscribe, unsubscribe, unsubscribeAll`

### Events

#### afterExecCommand

`afterExecCommand ( )`
Event fires at the end of the execCommand process. See Element.addListener for more information on listening for this event.

#### afterNodeChange

`afterNodeChange ( )`
Event fires at the end of the nodeChange process. See Element.addListener for more information on listening for this event.

#### afterRender

`afterRender ( )`
Event is fired after the render process finishes. See Element.addListener for more information on listening for this event.

#### animateChange

`animateChange ( eventInfo )`
Fires when the value for the configuration attribute 'animate' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeAnimateChange

`beforeAnimateChange ( eventInfo )`
Fires before the value for the configuration attribute 'animate' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeBlankimageChange

`beforeBlankimageChange ( eventInfo )`
Fires before the value for the configuration attribute 'blankimage' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeCssChange

`beforeCssChange ( eventInfo )`
Fires before the value for the configuration attribute 'css' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeDisabledChange

`beforeDisabledChange ( eventInfo )`
Fires before the value for the configuration attribute 'disabled' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeDompathChange

`beforeDompathChange ( eventInfo )`
Fires before the value for the configuration attribute 'dompath' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeExecCommand

`beforeExecCommand ( )`
Event fires at the beginning of the execCommand process. See Element.addListener for more information on listening for this event.

#### beforeExtracssChange

`beforeExtracssChange ( eventInfo )`
Fires before the value for the configuration attribute 'extracss' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeFocusatstartChange

`beforeFocusatstartChange ( eventInfo )`
Fires before the value for the configuration attribute 'focusAtStart' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeHandlesubmitChange

`beforeHandlesubmitChange ( eventInfo )`
Fires before the value for the configuration attribute 'handleSubmit' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeHeightChange

`beforeHeightChange ( eventInfo )`
Fires before the value for the configuration attribute 'height' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeHtmlChange

`beforeHtmlChange ( eventInfo )`
Fires before the value for the configuration attribute 'html' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeMarkupChange

`beforeMarkupChange ( eventInfo )`
Fires before the value for the configuration attribute 'markup' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeNodeChange

`beforeNodeChange ( )`
Event fires at the beginning of the nodeChange process. See Element.addListener for more information on listening for this event.

#### beforeRemovelinebreaksChange

`beforeRemovelinebreaksChange ( eventInfo )`
Fires before the value for the configuration attribute 'removeLineBreaks' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeToolbarChange

`beforeToolbarChange ( eventInfo )`
Fires before the value for the configuration attribute 'toolbar' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeWidthChange

`beforeWidthChange ( eventInfo )`
Fires before the value for the configuration attribute 'width' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### blankimageChange

`blankimageChange ( eventInfo )`
Fires when the value for the configuration attribute 'blankimage' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### cleanHTML

`cleanHTML ( )`
Event is fired after the cleanHTML method is called.

#### cssChange

`cssChange ( eventInfo )`
Fires when the value for the configuration attribute 'css' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### disabledChange

`disabledChange ( eventInfo )`
Fires when the value for the configuration attribute 'disabled' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### dompathChange

`dompathChange ( eventInfo )`
Fires when the value for the configuration attribute 'dompath' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### editorContentLoaded

`editorContentLoaded ( )`
Event is fired after the editor iframe's document fully loads and fires it's onload event. From here you can start injecting your own things into the document. See Element.addListener for more information on listening for this event.

#### editorDoubleClick

`editorDoubleClick ( ev )`
Passed through HTML Event. See Element.addListener for more information on listening for this event.

Parameters:
  `ev <Event>` The DOM Event that occured

#### editorKeyDown

`editorKeyDown ( ev )`
Passed through HTML Event. See Element.addListener for more information on listening for this event.

Parameters:
  `ev <Event>` The DOM Event that occured

#### editorKeyPress

`editorKeyPress ( ev )`
Passed through HTML Event. See Element.addListener for more information on listening for this event.

Parameters:
  `ev <Event>` The DOM Event that occured

#### editorKeyUp

`editorKeyUp ( ev )`
Passed through HTML Event. See Element.addListener for more information on listening for this event.

Parameters:
  `ev <Event>` The DOM Event that occured

#### editorMouseDown

`editorMouseDown ( ev )`
Passed through HTML Event. See Element.addListener for more information on listening for this event.

Parameters:
  `ev <Event>` The DOM Event that occured

#### editorMouseUp

`editorMouseUp ( ev )`
Passed through HTML Event. See Element.addListener for more information on listening for this event.

Parameters:
  `ev <Event>` The DOM Event that occured

#### extracssChange

`extracssChange ( eventInfo )`
Fires when the value for the configuration attribute 'extracss' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### focusAtStartChange

`focusAtStartChange ( eventInfo )`
Fires when the value for the configuration attribute 'focusAtStart' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### handleSubmitChange

`handleSubmitChange ( eventInfo )`
Fires when the value for the configuration attribute 'handleSubmit' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### heightChange

`heightChange ( eventInfo )`
Fires when the value for the configuration attribute 'height' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### htmlChange

`htmlChange ( eventInfo )`
Fires when the value for the configuration attribute 'html' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### markupChange

`markupChange ( eventInfo )`
Fires when the value for the configuration attribute 'markup' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### removeLineBreaksChange

`removeLineBreaksChange ( eventInfo )`
Fires when the value for the configuration attribute 'removeLineBreaks' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### toolbarChange

`toolbarChange ( eventInfo )`
Fires when the value for the configuration attribute 'toolbar' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### toolbarLoaded

`toolbarLoaded ( )`
Event is fired during the render process directly after the Toolbar is loaded. Allowing you to attach events to the toolbar. See Element.addListener for more information on listening for this event.

#### widthChange

`widthChange ( eventInfo )`
Fires when the value for the configuration attribute 'width' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### Events inherited from YAHOO.util.Element:

`appendTo, available, beforeAppendTo, beforeElementChange, contentReady, elementChange,`

### Configuration Attributes

#### allowNoEdit `- Boolean`

Should the editor check for non-edit fields. It should be noted that this technique is not perfect. If the user does the right things, they will still be able to make changes. Such as highlighting an element below and above the content and hitting a toolbar button or a shortcut key.
Default Value: false

#### animate `- Boolean`

Should the editor animate window movements
Default Value: false unless Animation is found, then true

#### autoHeight `- Boolean || Number`

Remove the scrollbars from the edit area and resize it to fit the content. It will not go any lower than the current config height.
Default Value: false

#### blankimage `- String`

The URL for the image placeholder to put in when inserting an image.
Default Value: The yahooapis.com address for the current release + 'assets/blankimage.png'

#### container `- private HTMLElement`

Used when dynamically creating the Editor from Javascript with no default textarea. We will create one and place it in this container. If no container is passed we will append to document.body.
Default Value: false

#### css `- String`

The Base CSS used to format the content of the editor
Default Value: `

    html {
    height: 95%;
    }
    body {
    height: 100%;
    padding: 7px; background-color: #fff; font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;
    }
    a {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    }
    .warning-localfile {
    border-bottom: 1px dashed red !important;
    }
    .yui-busy {
    cursor: wait !important;
    }
    img.selected { //Safari image selection
    border: 2px dotted #808080;
    }
    img {
    cursor: pointer !important;
    border: none;
    }

`

#### disabled `- Boolean`

This will toggle the editor's disabled state. When the editor is disabled, designMode is turned off and a mask is placed over the iframe so no interaction can take place. All Toolbar buttons are also disabled so they cannot be used.
Default Value: false

#### dompath `- Boolean`

Toggle the display of the current Dom path below the editor
Default Value: false

#### editor_wrapper `- private HTMLElement`

The outter wrapper for the entire editor.
Default Value: null

#### element_cont `- HTMLElement`

Internal config for the editors container
Default Value: false

#### extracss `- String`

Extra user defined css to load after the default SimpleEditor CSS
Default Value: ''

#### focusAtStart `- Boolean`

Should we focus the window when the content is ready?
Default Value: false

#### handleSubmit `- Boolean`

Config handles if the editor will attach itself to the textareas parent form's submit handler. If it is set to true, the editor will attempt to attach a submit listener to the textareas parent form. Then it will trigger the editors save handler and place the new content back into the text area before the form is submitted.
Default Value: false

#### height `- String`

The height of the editor iframe container, not including the toolbar..
Default Value: Best guessed size of the textarea, for best results use CSS to style the height of the textarea or pass it in as an argument

#### html `- String`

The default HTML to be written to the iframe document before the contents are loaded (Note that the DOCTYPE attr will be added at render item)
Default Value: This HTML requires a few things if you are to override:

`{TITLE}, {CSS}, {HIDDEN_CSS}, {EXTRA_CSS}` and `{CONTENT}` need to be there, they are passed to YAHOO.lang.substitute to be replace with other strings.

`onload="document.body._rteLoaded = true;"` : the onload statement must be there or the editor will not finish loading.

`

    <html>
    <head>
    <title>{TITLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    {CSS}
    </style>
    <style>
    {HIDDEN_CSS}
    </style>
    <style>
    {EXTRA_CSS}
    </style>
    </head>
    <body onload="document.body._rteLoaded = true;">
    {CONTENT}
    </body>
    </html>

`

#### iframe `- private HTMLElement`

Internal config for holding the iframe element.
Default Value: null

#### limitCommands `- Boolean`

Should the Editor limit the allowed execCommands to the ones available in the toolbar. If true, then execCommand and keyboard shortcuts will fail if they are not defined in the toolbar.
Default Value: false

#### markup `- String`

Should we try to adjust the markup for the following types: semantic, css, default or xhtml
Default Value: "semantic"

#### nodeChangeThreshold `- Number`

The number of seconds that need to be in between nodeChange processing
Default Value: 3

#### panel `- Boolean`

A reference to the panel we are using for windows.
Default Value: false

#### plainText `- Boolean`

Process the inital textarea data as if it was plain text. Accounting for spaces, tabs and line feeds.
Default Value: false

#### removeLineBreaks `- Boolean`

Should we remove linebreaks and extra spaces on cleanup
Default Value: false

#### textarea `- private HTMLElement`

Internal config for holding the textarea element (replaced with element).
Default Value: null

#### toolbar `- Object`

The default toolbar config.

#### toolbar_cont `- Boolean`

Internal config for the toolbars container
Default Value: false

#### width `- String`

The width of the editor container.
Default Value: Best guessed size of the textarea, for best results use CSS to style the width of the textarea or pass it in as an argument

#### Configuration attributes inherited from YAHOO.util.Element:

`element,`

Copyright © 2007 Yahoo! Inc. All rights reserved.