Inline Edit Configuration Options

`selectors`

`strings`

`listeners`

`styles`

`paddings`

`applyEditPadding`

`submitOnEnter`

`displayModeRenderer`

`editModeRenderer`

`displayAccessor`

`displayView`

`editAccessor`

`editVIew`

`lazyEditView`

`blurHandlerBinder`

Description	A function which acts on the overall component to bind a handler for the `blur` event received on the editable view. For integrations where the editable view is a complex collection of elements, such as dropdown inlineEdit, this needs to take an arbitrary form. A standard implementation is provided as `fluid.deadMansBlur` which will infer that focus is leaving a set of elements if none of them receives a `focus` after a `blur` within a 150 millisecond horizon.
Default	null
Example	fluid.inlineEdit("#myContainer", { blurHandlerBinder: "" });

`selectOnEdit`

Description	Indicates whether or not to automatically select the editable text when the component switches into edit mode.
Default	false
Example	fluid.inlineEdit("#myContainer", { selectOnEdit: true });

`defaultViewText`

Description	The default text to use when filling in an empty component. Set to empty to suppress this behaviour.
Default	"Click here to edit"
Example	fluid.inlineEdit("#myContainer", { defaultViewText: "" });

`useTooltip`

Description	Indicates whether or not the component should display a custom ("invitation") tooltip on mouse hover
Default	false
Example	fluid.inlineEdit("#myContainer", { useTooltip: true });

`tooltipText`

Description	The text to use for the tooltip to be displayed when hovering the mouse over the component
Default	"Click item to edit"
Example	fluid.inlineEdit("#myContainer", { tooltipText: "Click to edit" });
See also	`useTooltip`

`tooltipID`

Description	The id to be used for the DOM node holding the tooltip
Default	"tooltip"
Example	fluid.inlineEdit("#myContainer", { tooltipID: "myTooltip" });
See also	`useTooltip`

`tooltipDelay`

Description	The delay, in ms, between starting to hover over the component and showing the tooltip
Default	1000
Example	fluid.inlineEdit("#myContainer", { tooltipDelay: 500 });
See also	`useTooltip`

Additional options for Multiple Inline Edits

The options for the creation of multiple Inline Edits are the same as those for the creation of a single Inline Edit, with the addition of a selector for identifying the editable elements. The default selector is defined as follows:

selectors: {
    editables: ".flc-inlineEditable"
}

InlineEdit Types

Several of the InlineEdit configuration elements make use of various "Implicit" or "Duck Typed" objects which have particular structures or signatures.

Type name	Description	Layout
`ViewAccessor`	Appears as `displayAccessor` and `editAccessor`. Used to convey updates to and from the model to its representation in the DOM. Exposes a single function `value` with the same semantics as `jQuery.val()`.	`value: function( [optional value]) }`
`InlineEditView`	Appears as `displayView` and `editView`. Used to wrap the action of the relevant ViewAccessor as it maintains synchrony between the model and DOM. For some views, especially where there is some "default text" to invite the user to edit, there is extra formality to displaying the model which is InlineEdit-specific, rather than markup-specific. Such logic goes in this class, and is less frequently user-configured.	`{ refreshView: function (that, source) }`
`InlineEditRenderer`	Appears as `editModeRenderer`. Actually a function, rather than a structure, with a fairly complex contract. Is passed the entire component `that` in order to inspect the current markup situation at startup time, to manipulate it if necessary to render and initialise the editable component view, and return the relevant nodes which it has either created or discovered.	`function (that) -> { container, field }`

Infusion Documentation

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.