Yahoo! UI Library

editor  2.3.0

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

Show Private Show Protected

Class YAHOO.widget.Editor - extends YAHOO.util.Element

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

_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

_disabled - private Array

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

_mask - private Object

DOM Element holder for the editor Mask when disabled

_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_HIDDEN - protected String

CSS class applied to the body when the hiddenelements button is pressed.

CLASS_LOCAL_FILE - protected String

CSS class applied to an element when it's found to have a local url.

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.

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.

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

The Title of the close button in the Editor Window

STR_CLOSE_WINDOW_NOTE - String

A note appearing in the Editor Window to tell the user that the Escape key will close the window

STR_IMAGE_BORDER - String

The label string for the image border.

STR_IMAGE_COPY - String

The label string for the image copy and paste message for Opera and Safari

STR_IMAGE_HERE - String

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

STR_IMAGE_ORIG_SIZE - String

The label string for Original Image Size

STR_IMAGE_PADDING - String

The label string for the image padding.

STR_IMAGE_PROP_TITLE - String

The title for the Image Property Editor Window

STR_IMAGE_SIZE - String

The label string for Image Size

STR_IMAGE_TEXTFLOW - String

The label string for the image text flow.

STR_IMAGE_TITLE - String

The label string for Image Description

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

The string for the open in a new window label.

STR_LINK_PROP_REMOVE - String

The label string for the Remove link from text link inside the property editor.

STR_LINK_PROP_TITLE - String

The label string for the Link Property Editor Window.

STR_LINK_TITLE - String

The string for the link description.

STR_LINK_URL - String

The label string for the Link URL.

STR_LOCAL_FILE_WARNING - String

The label string for the local file warning.

STR_TITLE - String

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

tag - object


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

_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

_closeWindow

private void _closeWindow ( ev )
Close the currently open EditorWindow with the Escape key.
Parameters:
ev <Event> The keypress Event that we are trapping
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 a span 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 this.currentElement, so we now have an element reference to the element that was just modified. At this point we can use standard DOM manipulation to change it 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

_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 void _getBlankImage ( )
Retrieves the full url of the image to use as the blank image.
Returns: void

_getDoc

private Object _getDoc ( )
Get the Document of the IFRAME
Returns: Object

_getDomPath

private void _getDomPath ( )
This method will attempt to build the DOM path from the currently selected element.
Returns: void

_getRange

private void _getRange ( )
Handles the different range objects across the A-Grade list.
Returns: void

_getSelectedElement

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

_getSelection

private void _getSelection ( )
Handles the different selection objects across the A-Grade list.
Returns: void

_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

_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

_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

_hasSelection

private void _hasSelection ( )
Determines if there is a selection in the editor document.
Returns: void

_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

_renderPanel

private void _renderPanel ( )
Renders the panel used for Editor Windows to the document so we can start using it..
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

_showHidden

private void _showHidden ( )
Toggle on/off the hidden.css file.
Returns: void

_toggleDesignMode

private void _toggleDesignMode ( )
Toggles the designMode of the iFrame document on and off.
Returns: void

_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

void cleanHTML ( html )
Process the HTML with a few regexes to clean it up and stabilize the output
Parameters:
html <String> The unfiltered HTML
Returns: void

clearEditorDoc

void clearEditorDoc ( )
Clear the doc of the Editor
Returns: void

closeWindow

void closeWindow ( )
Close the currently open EditorWindow.
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

getEditorHTML

void getEditorHTML ( )
Gets the unprocessed/unfiltered HTML from the editor
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 ( force )
Realign the window with the currentElement and reposition the knob above the panel.
Parameters:
force <Boolean> Boolean to tell it to move but not use any animation (Usually done the first time the window is loaded.)
Returns: void

nodeChange

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

openWindow

void openWindow ( win )
Opens a new "window/panel"
Parameters:
win <YAHOO.widget.EditorWindow> A YAHOO.widget.EditorWindow instance
Returns: void

render

void render ( )
Causes the toolbar and the editor to render and replace the textarea.
Returns: void

saveHTML

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

setEditorHTML

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

toString

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

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.

afterOpenWindow

afterOpenWindow ( win , panel )
Event fires after an Editor Window is opened. See Element.addListener for more information on listening for this event.
Parameters:
win <EditorWindow> The EditorWindow object
panel <Overlay> The Overlay object that is used to create the window.

afterRender

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

beforeExecCommand

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

beforeNodeChange

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

beforeOpenWindow

beforeOpenWindow ( win , panel )
Event fires before an Editor Window is opened. See Element.addListener for more information on listening for this event.
Parameters:
win <EditorWindow> The EditorWindow object
panel <Overlay> The Overlay object that is used to create the window.

closeWindow

closeWindow ( win )
Event fires after an Editor Window is closed. See Element.addListener for more information on listening for this event.
Parameters:
win <EditorWindow> The EditorWindow object

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

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.

windowCMDClose

windowCMDClose ( win , panel )
Dynamic event fired when an EditorWindow is closed.. The dynamic event is based on the name of the window. Example Window: createlink, opening this window would fire the windowcreatelinkClose event. See Element.addListener for more information on listening for this event.
Parameters:
win <EditorWindow> The EditorWindow object
panel <Overlay> The Overlay object that is used to create the window.

windowCMDOpen

windowCMDOpen ( win , panel )
Dynamic event fired when an EditorWindow is opened.. The dynamic event is based on the name of the window. Example Window: createlink, opening this window would fire the windowcreatelinkOpen event. See Element.addListener for more information on listening for this event.
Parameters:
win <EditorWindow> The EditorWindow object
panel <Overlay> The Overlay object that is used to create the window.

Events inherited from YAHOO.util.Element:

Configuration Attributes

animate - Boolean

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

blankimage - String

The CSS used to show/hide hidden elements on the page
Default Value: 'assets/blankimage.png'

css - String

The Base CSS used to format the content of the editor
Default Value:
body {
padding: 7px; background-color: #fff; font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;
}
span.yui-tag-a {
color: blue; text-decoration: underline;
}
span.yui-tag-blockquote {
margin: 1em; display: block;
}
span.yui-tag-indent {
margin-left: 1em; display: block;
}
.warning-localfile {
border-bottom: 1px dashed red !important;
}

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

element_cont - Boolean

Internal config for the editors container
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

hiddencss - String

The CSS used to show/hide hidden elements on the page, these rules must be prefixed with the class provided in this.CLASS_HIDDEN
Default Value:
.hidden div, .hidden p, .hidden span, .hidden img {
border: 1px dotted #ccc;
}
.hidden .yui-non {
border: none;
}
.hidden img {
padding: 2px;
}

html - String

The default HTML to be written to the iframe document before the contents are loaded
Default Value: This HTML requires a few things if you are to override:

{TITLE}, {CSS}, {HIDDEN_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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
{CSS}
</style>
<style>
{HIDDEN_CSS}
</style>
</head>
<body onload="document.body._rteLoaded = true;">
{CONTENT}
</body>
</html>

iframe - private Boolean

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

localFileWarning - Boolean

Should we throw the warning if we detect a file that is local to their machine?
Default Value: true

markup - Boolean

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

panel - Boolean

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

textarea - private Boolean

A reference to the textarea element that we are replacing
Default Value: null

toolbar - Object

The default toolbar config.
Default Value: This config is too large to display here, view the code to see it:

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 © 2007 Yahoo! Inc. All rights reserved.