YUI recommends YUI 3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

Yahoo! UI Library

editor  2.8.2r1

Yahoo! UI Library > editor > YAHOO.widget.SimpleEditor
Search:
 
Filters

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

_contentTimerMax - private object

The number of times the loaded content should be checked before giving up. Default: 500

_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.

_fixListRunning - private Boolean

Keeps more than one _fixListDupIds from running at the same time.

_fixNodesTimer - private Date

Holder for the fixNodes timer

_focused - private Boolean

Holder for trapping focus/blur state and prevent double events

_formButtonClicked - private HTMLElement

The form button that was clicked to submit the form.

_formButtons - private Array

Array of buttons that are in the Editor's parent form (for handleSubmit)

_keyMap - private {Object/Mixed}

Named key maps for various actions in the Editor. Example: CLOSE_WINDOW: { key: 87, mods: ['shift', 'ctrl'] }. This entry shows that when key 87 (W) is found with the modifiers of shift and control, the window will close. You can customize this object to tweak keyboard shortcuts.

_lastButton - private Object

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

_lastCommand - private String

A cache of the last execCommand (used for Undo/Redo so they don't mark an undo level)

_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

_nodeChangeDelayTimer - private Number

Holds a reference to the nodeChangeDelay setTimeout call

_nodeChangeTimer - private Number

Holds a reference to the nodeChange setTimeout call

_rendered - private Boolean

Flag to determine if editor has been rendered or not

_resizeConfig - private object

The default config for the Resize Utility

_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.

_textarea - Boolean

Flag to determine if we are using a textarea or an HTML Node.

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

dd - YAHOO.util.DD/YAHOO.util.DDProxy

A reference to the DragDrop object.

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

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.

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..

resize - YAHOO.util.Resize

A reference to the Resize object

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_IMAGE_URL - String

The label string for Image URL

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:

Properties inherited from YAHOO.util.AttributeProvider:

Methods

_checkKey

private Boolean _checkKey ( k , e )
Checks a keyMap entry against a key event
Parameters:
k <Object> The _keyMap object
e <Event> The Mouse Event

_checkLoaded

private void _checkLoaded ( raw )
Called from a setTimeout loop to check if the iframes body.onload event has fired, then it will init the editor.
Parameters:
raw <Boolean> Don't add events.

_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

_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

_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.

_createIframe

private Object _createIframe ( id )
_createIframe
Parameters:
id <String> The string ID to prefix the iframe with
Returns: Object
iFrame object

_createInsertElement

private HTMLElement _createInsertElement ( css )
Creates a new "currentElement" then adds some text (and other things) to make it selectable and stylable. Then the user can continue typing.
Parameters:
css <Object> (optional) Object literal containing styles to apply to the new element.

_disableEditor

private void _disableEditor ( disabled )
Creates a mask to place over the Editor.
Parameters:
disabled <Boolean> Pass true to disable, false to enable

_fixListDupIds

private void _fixListDupIds ( )
Some browsers will duplicate the id of an LI when created in designMode. This method will fix the duplicate id issue. However it will only preserve the first element in the document list with the unique id.

_fixNodes

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

_focusWindow

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

_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

_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

_handleAfterNodeChange

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

_handleAlign

private void _handleAlign ( o )
Handles the alignment buttons in the toolbar.
Parameters:
o <Object> Object returned from Toolbar's buttonClick Event

_handleAutoHeight

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

_handleBlur

private void _handleBlur ( e )
Handles the blur of the iframe. Note, this is window blur event, not an Editor blur event.
Parameters:
e <Event> The DOM Event

_handleClick

private void _handleClick ( ev )
Handles all click events inside the iFrame document.
Parameters:
ev <Event> The event we are working on.

_handleColorPicker

private void _handleColorPicker ( o )
Handles the colorpicker buttons in the toolbar.
Parameters:
o <Object> Object returned from Toolbar's buttonClick Event

_handleCreateLinkClick

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

_handleCreateLinkWindowClose

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

_handleDoubleClick

private void _handleDoubleClick ( ev )
Handles all doubleclick events inside the iFrame document.
Parameters:
ev <Event> The event we are working on.

_handleFocus

private void _handleFocus ( e )
Handles the focus of the iframe. Note, this is window focus event, not an Editor focus event.
Parameters:
e <Event> The DOM Event

_handleFontSize

private void _handleFontSize ( o )
Handles the font size button in the toolbar.
Parameters:
o <Object> Object returned from Toolbar's buttonClick Event

_handleFormButtonClick

private void _handleFormButtonClick ( ev )
The click listener assigned to each submit button in the Editor's parent form.
Parameters:
ev <Event> The click event

_handleFormSubmit

private void _handleFormSubmit ( ev )
Handles the form submission.
Parameters:
ev <Object> The Form Submit Event

_handleInsertImageClick

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

_handleInsertImageWindowClose

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

_handleKeyDown

private void _handleKeyDown ( ev )
Handles all keydown events inside the iFrame document.
Parameters:
ev <Event> The event we are working on.

_handleKeyPress

private void _handleKeyPress ( ev )
Handles all keypress events inside the iFrame document.
Parameters:
ev <Event> The event we are working on.

_handleKeyUp

private void _handleKeyUp ( ev )
Handles all keyup events inside the iFrame document.
Parameters:
ev <Event> The event we are working on.

_handleMouseDown

private void _handleMouseDown ( ev )
Handles all mousedown events inside the iFrame document.
Parameters:
ev <Event> The event we are working on.

_handleMouseUp

private void _handleMouseUp ( ev )
Handles all mouseup events inside the iFrame document.
Parameters:
ev <Event> The event we are working on.

_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

_hasParent

private _hasParent ( el , tag )
_hasParent
Parameters:
el <HTMLElement> The element to check
tag <String> The tag that the element needs to be
Returns:
HTMLElement

_hasSelection

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

_initEditor

private void _initEditor ( raw )
This method is fired from _checkLoaded when the document is ready. It turns on designMode and set's up the listeners.
Parameters:
raw <Boolean> Don't add events.

_initEditorEvents

private void _initEditorEvents ( )
This method sets up the listeners on the Editors document.

_isElement

private Boolean _isElement ( el , tag )
_isElement
Parameters:
el <HTMLElement> The element to check
tag <String> The tag that the element needs to be

_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

_isNonEditable

private _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:
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.

_nodeChange

private void _nodeChange ( force )
Fired from nodeChange in a setTimeout.
Parameters:
force <Boolean> Optional paramenter to skip the threshold counter

_removeEditorEvents

private void _removeEditorEvents ( )
This method removes the listeners on the Editors document (for disabling).

_render

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

_selectNode

private void _selectNode ( node )
Places the highlight around a given node
Parameters:
node <HTMLElement> The node to select

_setCurrentEvent

private void _setCurrentEvent ( ev )
Sets the current event property
Parameters:
ev <Event> The event to cache

_setDesignMode

private void _setDesignMode ( state )
Sets the designMode property of the iFrame document's body.
Parameters:
state <String> This should be either on or off

_setEditorStyle

void _setEditorStyle ( stat )
Set the editor to use CSS instead of HTML
Parameters:
stat <Booleen> True/False

_setInitialContent

private void _setInitialContent ( raw )
This method will open the iframes content document and write the textareas value into it, then start the body.onload checking.
Parameters:
raw <Boolean> Don't add events.

_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

_setupAfterElement

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

_setupDD

private void _setupDD ( )
Sets up the DD instance used from the 'drag' config option.

_setupResize

private void _setupResize ( )
Creates the Resize instance and binds its events.

_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.

_toggleDesignMode

private String _toggleDesignMode ( )
Toggles the designMode property 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)

_writeDomPath

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

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

closeWindow

void closeWindow ( )
Override Method for Advanced Editor

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

cmd_bold

void cmd_bold ( value )
This is an execCommand override method. It is called from execCommand when the execCommand('bold') is used.
Parameters:
value <object> Value passed from the execCommand method

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

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

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

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

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

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

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

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

cmd_italic

void cmd_italic ( value )
This is an execCommand override method. It is called from execCommand when the execCommand('italic') is used.
Parameters:
value <object> Value passed from the execCommand method

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)

cmd_underline

void cmd_underline ( value )
This is an execCommand override method. It is called from execCommand when the execCommand('underline') is used.
Parameters:
value <object> Value passed from the execCommand method

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

destroy

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

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'

filter_all_rgb

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:
String

filter_internals

filter_internals ( String )
Filters internal RTE strings and bogus attrs we don't want
Parameters:
String <object> html The HTML string to filter
Returns:
String

filter_invalid_lists

void filter_invalid_lists ( String )
Filters invalid ol and ul list markup, converts this:
    1. ..
    to this:
    1. ..
  • Parameters:
    String <object> html The HTML string to filter

    filter_msword

    void filter_msword ( String )
    Filters out msword html attributes and other junk. Activate with filterWord: true in config
    Parameters:
    String <object> html The HTML string to filter

    filter_rgb

    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:
    String

    filter_safari

    filter_safari ( String )
    Filters strings specific to Safari
    Parameters:
    String <object> html The HTML string to filter
    Returns:
    String

    focus

    void focus ( )
    Attempt to set the focus of the iframes window.

    getEditorHTML

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

    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.

    init

    void init ( )
    The Editor class' initialization method

    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.

    moveWindow

    void moveWindow ( )
    Override Method for Advanced Editor

    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

    openWindow

    void openWindow ( )
    Override Method for Advanced Editor

    post_filter_linebreaks

    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:
    String

    pre_filter_linebreaks

    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:
    String

    render

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

    saveHTML

    saveHTML ( )
    Cleans the HTML with the cleanHTML method then places that string back into the textarea.
    Returns:
    String

    setEditorHTML

    void setEditorHTML ( incomingHTML )
    Loads HTML into the editors body
    Parameters:
    incomingHTML <String> The html content to load into the editor

    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.

    toString

    String toString ( )
    Returns a string representing the editor.

    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 ( event )
    Fires when the value for the configuration attribute 'animate' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeAnimateChange

    beforeAnimateChange ( event )
    Fires before the value for the configuration attribute 'animate' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeBlankimageChange

    beforeBlankimageChange ( event )
    Fires before the value for the configuration attribute 'blankimage' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeCssChange

    beforeCssChange ( event )
    Fires before the value for the configuration attribute 'css' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeDisabledChange

    beforeDisabledChange ( event )
    Fires before the value for the configuration attribute 'disabled' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeDompathChange

    beforeDompathChange ( event )
    Fires before the value for the configuration attribute 'dompath' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeEditorClick

    beforeEditorClick ( ev )
    Fires before editor event, returning false will stop the internal processing.
    Parameters:
    ev <Event> The DOM Event that occured

    beforeEditorDoubleClick

    beforeEditorDoubleClick ( ev )
    Fires before editor event, returning false will stop the internal processing.
    Parameters:
    ev <Event> The DOM Event that occured

    beforeEditorKeyDown

    beforeEditorKeyDown ( ev )
    Fires before editor event, returning false will stop the internal processing.
    Parameters:
    ev <Event> The DOM Event that occured

    beforeEditorKeyPress

    beforeEditorKeyPress ( ev )
    Fires before editor event, returning false will stop the internal processing.
    Parameters:
    ev <Event> The DOM Event that occured

    beforeEditorKeyUp

    beforeEditorKeyUp ( ev )
    Fires before editor event, returning false will stop the internal processing.
    Parameters:
    ev <Event> The DOM Event that occured

    beforeEditorMouseDown

    beforeEditorMouseDown ( ev )
    Fires before editor event, returning false will stop the internal processing.
    Parameters:
    ev <Event> The DOM Event that occured

    beforeEditorMouseUp

    beforeEditorMouseUp ( ev )
    Fires before editor event, returning false will stop the internal processing.
    Parameters:
    ev <Event> The DOM Event that occured

    beforeExecCommand

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

    beforeExtracssChange

    beforeExtracssChange ( event )
    Fires before the value for the configuration attribute 'extracss' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeFocusAtStartChange

    beforeFocusAtStartChange ( event )
    Fires before the value for the configuration attribute 'focusAtStart' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeHandleSubmitChange

    beforeHandleSubmitChange ( event )
    Fires before the value for the configuration attribute 'handleSubmit' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeHeightChange

    beforeHeightChange ( event )
    Fires before the value for the configuration attribute 'height' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeHtmlChange

    beforeHtmlChange ( event )
    Fires before the value for the configuration attribute 'html' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeMarkupChange

    beforeMarkupChange ( event )
    Fires before the value for the configuration attribute 'markup' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous 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 ( event )
    Fires before the value for the configuration attribute 'removeLineBreaks' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeToolbarChange

    beforeToolbarChange ( event )
    Fires before the value for the configuration attribute 'toolbar' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    beforeWidthChange

    beforeWidthChange ( event )
    Fires before the value for the configuration attribute 'width' changes. Return false to cancel the attribute change.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    blankimageChange

    blankimageChange ( event )
    Fires when the value for the configuration attribute 'blankimage' changes.
    Parameters:
    event <{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 ( event )
    Fires when the value for the configuration attribute 'css' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    disabledChange

    disabledChange ( event )
    Fires when the value for the configuration attribute 'disabled' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    dompathChange

    dompathChange ( event )
    Fires when the value for the configuration attribute 'dompath' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    editorClick

    editorClick ( ev )
    Passed through HTML Event. See Element.addListener for more information on listening for this event.
    Parameters:
    ev <Event> The DOM Event that occured

    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

    editorWindowBlur

    editorWindowBlur ( )
    Fires when the iframe is blurred. Note, this is window blur event, not an Editor blur event.

    editorWindowFocus

    editorWindowFocus ( )
    Fires when the iframe is focused. Note, this is window focus event, not an Editor focus event.

    extracssChange

    extracssChange ( event )
    Fires when the value for the configuration attribute 'extracss' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    focusAtStartChange

    focusAtStartChange ( event )
    Fires when the value for the configuration attribute 'focusAtStart' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    handleSubmitChange

    handleSubmitChange ( event )
    Fires when the value for the configuration attribute 'handleSubmit' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    heightChange

    heightChange ( event )
    Fires when the value for the configuration attribute 'height' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    htmlChange

    htmlChange ( event )
    Fires when the value for the configuration attribute 'html' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    markupChange

    markupChange ( event )
    Fires when the value for the configuration attribute 'markup' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    removeLineBreaksChange

    removeLineBreaksChange ( event )
    Fires when the value for the configuration attribute 'removeLineBreaks' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    toolbarChange

    toolbarChange ( event )
    Fires when the value for the configuration attribute 'toolbar' changes.
    Parameters:
    event <{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 ( event )
    Fires when the value for the configuration attribute 'width' changes.
    Parameters:
    event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

    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 - 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

    disabled_iframe - private HTMLElement

    Internal config for holding the iframe element used when disabling the Editor.
    Default Value: null

    dompath - Boolean

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

    drag - {Boolean/String}

    Set this config to make the Editor draggable, pass 'proxy' to make use YAHOO.util.DDProxy.

    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: ''

    filterWord - Boolean

    Attempt to filter out MS Word HTML from the Editor's output.

    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

    insert - Boolean

    If true, selection is not required for: fontname, fontsize, forecolor, backcolor.
    Default Value: false

    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"

    maxUndo - Number

    The max number of undo levels to store.
    Default Value: 30

    nodeChangeDelay - Boolean

    Do we wrap the nodeChange method in a timeout for performance. Default: true.
    Default Value: true

    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

    ptags - Boolean

    If true, the editor uses <P> tags instead of <br> tags. (Use Shift + Enter to get a <br>)
    Default Value: false

    removeLineBreaks - Boolean

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

    resize - Boolean

    Set this to true to make the Editor Resizable with YAHOO.util.Resize. The default config is available: myEditor._resizeConfig Animation will be ignored while performing this resize to allow for the dynamic change in size of the toolbar.

    saveEl - HTMLElement

    When save HTML is called, this element will be updated as well as the source of data.
    Default Value: element

    setDesignMode - Boolean

    Should the Editor set designMode on the document. Default: true.
    Default Value: true

    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:


    Copyright © 2010 Yahoo! Inc. All rights reserved.