Vous êtes sur la page 1sur 1

YUI Library: Rich Text Editor [beta] 2008-2-19 v2.

5
Simple Use Case: YAHOO.widget.Editor Interesting Moments in Rich Text Editor & Toolbar YAHOO.widget.Editor:
See online docs for complete list of Rich Text Editor and Toolbar events. Methods
Markup: Event Fires...
<body class="yui-skin-sam"> render() Causes the toolbar and the
editorContentLoaded Fires after the editor iframe’s document fully loads. editor to render and replace the textarea.
<textarea id="msgpost">Preloaded HTML goes here. editorMouseUp, Fires in response to the corresponding Dom event.
setEditorHTML(string html)
editorMouseDown,
</textarea> editorDoubleClick, Loads HTML into the editor’s body.
</body> editorKeyUp, getEditorHTML() Returns the
editorKeyDown unprocessed HTML from the editor.
Script: beforeExecCommand, Fires at the beginning/end of the execCommand process.
saveHTML() Cleans the HTML
afterExecCommand Reference YAHOO.util.Element.html#addListener for more details.
var oEditor = new YAHOO.widget.Editor('msgpost', beforeOpenWindow, Fires before/after an editor window is opened. with the cleanHTML method and places
{ afterOpenWindow the string into the textarea.
height: '300px', closeWindow Fires after an editor window is closed. cleanHTML(string html)
toolbarExpanded, Fires when toolbar is expanded/collapsed via the collapse button. Processes the HTML with a few regexes
width: '500px' toolbarCollapsed to clean it up and stabilize the output.
}); buttonClick Fires when a toolbar button receives a click event. clearEditorDoc() Clears the
oEditor.render(); All Editor events are Custom Events (see Element docs); subscribe to these events using editor doc.
their subscribe method: oEditor.on(‘afterNodeChange’,fnMyHandler);. destroy() Destroys the editor along
Creates an Editor instance with default configurations. with all of its elements and objects.

Key Rich Text Editor Configuration Options toString() Returns a string


representing the Editor.
See online docs for complete list of Rich Text Editor configuration options.
nodeChange() Handles toolbar
Option (type) Default Description setup, getting the Dom path, and fixing
height, width best guessed size of The height/width of the editor iframe container not nodes.
textarea including the toolbar. execCommand(str
animate false Indicates whether or not the editor should animate
movements. command[, str arg]) Levels the
disabled false Toggle for the editor’s disabled state. When disabled, differences in the support by various
design mode is off and a mask is placed over the browsers of execCommand actions.
iframe so no interaction can take place.
dompath false Toggles the display of the current Dom path below the YAHOO.widget.Toolbar:
editor.
toolbar See editor.js.html The default toolbar config. Methods
handleSubmit false When true, the editor will attempt to attach a submit
listener to the parent form that would trigger the editor’s addButton(obj config) Add a
save handler and place the new content back into the new button to the toolbar.
textarea before the form is submitted. addButtonGroup(obj
Editor options can be set in the constructor's second argument (eg, config) Adds a new button group to the
{height: '300px'}) or at runtime via set (eg, oEditor.set("height", "300px");). Toolbar.
addButtonToGroup(obj
Constructor: YAHOO.widget.Editor Constructor: YAHOO.widget.SimpleEditor config) Adds a new button group to a
toolbar group.
YAHOO.widget.Editor(str | el ref container[, obj YAHOO.widget.SimpleEditor(str | el ref container[, obj addSeparator() Adds a new
config]) button separator to the toolbar.
config]) getButtonByValue(str | obj
Arguments: Creates a SimpleEditor instance with default configurations. SimpleEditor command) Gets a button instance or
(1) Container element: <textarea> element or element id for the is a lighter version of the Editor Control. a menuitem instance from the toolbar by
<textarea> that will be transformed into a Rich Text Editor. its value.

(2) Configuration object: When instantiating an Editor, you can disableButton(str |


pass all configurations in as an object argument or configure number | obj button) Disables
a button in the toolbar.
the instance after instantiation. See Configuration Options enableButton(str | number
section for common configuration object members. | obj button) Enables a button in
the toolbar.

Dependencies selectButton(str | number |


obj button) Selects a button in the
Editor: Yahoo, Dom, Event, Element, ContainerCore; Animation, Menu toolbar.
and Button are optional. SimpleEditor: YAHOO, Dom, Event, and deselectButton(str |
Element; Animation and ContainerCore are optional. number | obj button) Deselects
a button in the toolbar.

Vous aimerez peut-être aussi