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
The Toolbar items that should ALWAYS be disabled event if there is a selection present in the editor.
The Toolbar items that should ALWAYS be enabled event if there isn't a selection present in the editor.
The base location of the editable page (this page) so that relative paths for image work.
Don't load the blank image more than once..
setTimeout holder for documentReady check
Counter to check the number of times the body is polled for before giving up
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' }
The Toolbar items that should be disabled if there is no selection present in the editor.
The DOCTYPE to use in the editable container.
Holder for the fixNodes timer
The form button that was clicked to submit the form.
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.
The last button pressed, so we don't disable it.
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).
Flag to determine when the last node change was fired
Flag to determine the last event that fired a node change
_mask
- private Object
DOM Element holder for the editor Mask when disabled
Holds a reference to the nodeChange setTimeout call
Flag to determine if editor has been rendered or not
The default config for the Resize Utility
Holder for caching iframe selections
The Toolbar commands that we should attempt to make tags out of instead of using styles.
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.
Flag to determine if we are using a textarea or an HTML Node.
A reference to the H2 placed after the editor for Accessibilty.
A reference to the H2 placed before the editor for Accessibilty.
Standard browser detection
Default CSS class to apply to the editors container element
Default CSS class to apply to the editors iframe element
Default CSS class to apply to the editors iframe's parent element
CSS class applied to elements that are not editable.
Default prefix for dynamically created class names
A reference to the current working element in the editor
A reference to the current editor event
A reference to the last font selected from the Toolbar
A reference to the currently open EditorWindow
dd
- YAHOO.util.DD/YAHOO.util.DDProxy
A reference to the DragDrop object.
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
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.
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.
setTimeout holder for Opera and Image DoubleClick event..
resize
- YAHOO.util.Resize
A reference to the Resize object
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.
The value to place in between the Dom path items
Set to true when you want the default execCommand function to not process anything
Set to true when you want the default nodeChange function to not process anything
The accessibility string for the element before the iFrame
The text to place in the URL textbox when using the blankimage.
The accessibility string for the element after the iFrame
The label string for the Link URL.
The Title of the HTML document that is created in the iFrame
Methods
private
Boolean
_checkKey
(
k
,
e
)
Checks a keyMap entry against a key event
- Parameters:
-
k <Object>
The _keyMap object
-
e <Event>
The Mouse Event
- Returns:
Boolean
private
void
_checkLoaded
(
)
Called from a setTimeout loop to check if the iframes body.onload event has fired, then it will init the editor.
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
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
private
void
_closeWindow
(
)
Override Method for Advanced Editor
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
private
Object
_createIframe
(
id
)
_createIframe
- Parameters:
-
id <String>
The string ID to prefix the iframe with
- Returns:
Object
- iFrame object
private
_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.
private
void
_disableEditor
(
disabled
)
Creates a mask to place over the Editor.
- Parameters:
-
disabled <Boolean>
Pass true to disable, false to enable
- Returns:
void
private
void
_fixNodes
(
)
Fix href and imgs as well as remove invalid HTML.
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
private
String
_getBlankImage
(
)
Retrieves the full url of the image to use as the blank image.
- Returns:
String
- The URL to the blank image
private
Object
_getDoc
(
)
Get the Document of the IFRAME
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.
private
Object
_getRange
(
)
Handles the different range objects across the A-Grade list.
- Returns:
Object
- Range Object
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.
private
Object
_getSelection
(
)
Handles the different selection objects across the A-Grade list.
- Returns:
Object
- Selection Object
private
Object
_getWindow
(
)
Get the Window of the IFRAME
private
void
_handleAfterNodeChange
(
)
Fires after a nodeChange happens to setup the things that where reset on the node change (button state).
private
void
_handleAlign
(
o
)
Handles the alignment buttons in the toolbar.
- Parameters:
-
o <Object>
Object returned from Toolbar's buttonClick Event
- Returns:
void
private
void
_handleAutoHeight
(
)
Handles resizing the editor's height based on the content
private
void
_handleClick
(
ev
)
Handles all click events inside the iFrame document.
- Parameters:
-
ev <Event>
The event we are working on.
- Returns:
void
private
void
_handleColorPicker
(
o
)
Handles the colorpicker buttons in the toolbar.
- Parameters:
-
o <Object>
Object returned from Toolbar's buttonClick Event
- Returns:
void
private
void
_handleCreateLinkClick
(
)
Handles the opening of the Link Properties Window when the Create Link button is clicked or an href is doubleclicked.
private
void
_handleCreateLinkWindowClose
(
)
Handles the closing of the Link Properties Window.
private
void
_handleDoubleClick
(
ev
)
Handles all doubleclick events inside the iFrame document.
- Parameters:
-
ev <Event>
The event we are working on.
- Returns:
void
private
void
_handleFontSize
(
o
)
Handles the font size button in the toolbar.
- Parameters:
-
o <Object>
Object returned from Toolbar's buttonClick Event
- Returns:
void
private
void
_handleFormButtonClick
(
ev
)
The click listener assigned to each submit button in the Editor's parent form.
- Parameters:
-
ev <Event>
The click event
- Returns:
void
private
void
_handleFormSubmit
(
ev
)
Handles the form submission.
- Parameters:
-
ev <Object>
The Form Submit Event
- Returns:
void
private
void
_handleInsertImageClick
(
)
Opens the Image Properties Window when the insert Image button is clicked or an Image is Double Clicked.
private
void
_handleInsertImageWindowClose
(
)
Handles the closing of the Image Properties Window.
private
void
_handleKeyDown
(
ev
)
Handles all keydown events inside the iFrame document.
- Parameters:
-
ev <Event>
The event we are working on.
- Returns:
void
private
void
_handleKeyPress
(
ev
)
Handles all keypress events inside the iFrame document.
- Parameters:
-
ev <Event>
The event we are working on.
- Returns:
void
private
void
_handleKeyUp
(
ev
)
Handles all keyup events inside the iFrame document.
- Parameters:
-
ev <Event>
The event we are working on.
- Returns:
void
private
void
_handleMouseDown
(
ev
)
Handles all mousedown events inside the iFrame document.
- Parameters:
-
ev <Event>
The event we are working on.
- Returns:
void
private
void
_handleMouseUp
(
ev
)
Handles all mouseup events inside the iFrame document.
- Parameters:
-
ev <Event>
The event we are working on.
- Returns:
void
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
private
_hasParent
(
el
,
tag
)
_hasParent
- Parameters:
-
el <HTMLElement>
The element to check
-
tag <String>
The tag that the element needs to be
private
Boolean
_hasSelection
(