Show:

<p><img src="assets/images/aui-editable/main.png"/></p>

A base class for Editable, providing: <ul> <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li> <li>Edit in place elements</li> </ul>

Quick Example:<br/>

<pre><code>var instance = new A.Editable({ node: '#editor' }).render(); </code></pre>

Check the list of <a href="Editable.html#configattributes">Configuration Attributes</a> available for Editable.

Constructor

Editable

(
  • config
)

Parameters:

  • config Object

    Object literal specifying widget configuration properties.

Methods

_afterFocusedChangeEditable

(
  • event
)
protected

Fires the <a href="Editable.html#event_stopEditing">stopEditing</a> event.

Parameters:

_createDropdown

(
  • Optional
)
protected

Creates a Dropdown instance.

Parameters:

  • Optional Object

    config params to override the default values.

_createEvents

() protected

Create the Events.

_defCancelFn

(
  • event
)
protected

Fires the cancel event.

Parameters:

_defSaveFn

(
  • event
)
protected

Fires the save event.

Parameters:

_defStartEditingFn

(
  • event
)
protected

Fires the startEditing event.

Parameters:

_defStopEditingFn

(
  • event
)
protected

Fires the stopEditing event.

Parameters:

_onKeypressEditable

(
  • event
)
protected

Fires <code>onkeypress</code> occurs on the editable element.

Parameters:

_onMouseEnterEditable

(
  • event
)
protected

Fires <code>onmouseenter</code> occurs on the editable element.

Parameters:

_onMouseLeaveEditable

(
  • event
)
protected

Fires <code>onmouseleave</code> occurs on the editable element.

Parameters:

_setInput

(
  • value
)
protected

Set the value of the <a href="Editable.html#property_inputNode">inputNode</a>.

Parameters:

  • value String

    Value of the input.

_setOutput

(
  • value
)
protected

Set the <code>innerHTML</code> of the <a href="Editable.html#config_node">node</a>.

Parameters:

  • value String

_startEditing

(
  • event
)
protected

Fires when start editing.

Parameters:

_syncContentText

(
  • event
)
protected

Sync the content text.

Parameters:

_toHTML

(
  • text
)
String protected

Converts the new lines <code>\n</code> to <code><br/></code> (i.e., nl2br).

Parameters:

  • text String

    Input text.

Returns:

String:

_toText

(
  • text
)
String protected

Converts HTML to text.

Parameters:

  • text String

    HTML input.

Returns:

String:

_uiSetNode

(
  • node.
)
protected

Handles the updating of the UI when the node is set.

Parameters:

bindUI

() protected

Bind the events on the Editable UI. Lifecycle.

cancel

()

Cancel the editable. Return to the original state.

initializer

() protected

Construction logic executed during Editable instantiation. Lifecycle.

renderUI

() protected

Create the DOM structure for the Editable. Lifecycle.

save

()

Save the editable. Fires the <a href="Editable.html#event_save">save</a> event.

syncUI

() protected

Sync the Editable UI. Lifecycle.

Properties

Editable.ATTRS

Object static

Static property used to define the default attribute configuration for the Editable.

Editable.NAME

String static

Static property provides a string to identify the class.

Attributes

cancelButton

String

<a href="ButtonItem.html">ButtonItem</a> constructor Object for the cancelButton.

Default: Button constructor Object.

contentText

String

Content text.

Default: ''

eventType

String

Event type to initialize the editable.

Default: 'click'

formatInput

Function

Function to format the input text displayed on the input.

Default: null

formatOutput

Function

Function to format the output text displayed on the input.

Default: null

icons

Array

Array with icons for the <a href="Toolbar.html">Toolbar</a>.

Default: []

inputType

String

Type of the input used to edit the <a href="Editable.html#config_node">node</a>.

Default: 'text'

renderTo

String | Node

Node to render the editable.

saveButton

String

<a href="ButtonItem.html">ButtonItem</a> constructor Object for the saveButton.

Default: Button constructor Object.

Events

cancel

Event.Custom

Handles the cancel event.

Event Payload:

save

Event.Custom

Handles the save event.

Event Payload:

startEditing

Event.Custom

Handles the startEditing event.

Event Payload:

stopEditing

Event.Custom

Handles the stopEditing event.

Event Payload: