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

editor

fluid.inlineEdit(container, options);

fluid.inlineEdits(container, options);

fluid.inlineEdit.dropdown(container, options);

fluid.inlineEdit.CKEditor(container, options);

fluid.inlineEdit.tinyMCE(container, options);

var myEdit = fluid.inlineEdit(componentContainer, options);

myEdit.edit();

myEdit.finish();

myEdit.cancel();

myEdit.isEditing();

myEdit.refreshView(source);

myEdit.tooltipEnabled();

/**
  * Pushes external changes to the model into the inline editor, refreshing its
  * rendering in the DOM. The modelChanged event will fire.
  * 
  * @param {String} newValue The bare value of the model, that is, the string being edited
  * @param {Object} source An optional "source" (perhaps a DOM element) which triggered this event
  */
myEdit.updateModelValue(newValue, source);

/**
  * Pushes external changes to the model into the inline editor, refreshing its
  * rendering in the DOM. The modelChanged event will fire.
  * 
  * @param {Object} newValue The full value of the new model, that is, a model object which
  *      contains the editable value as the element named "value"
  * @param {Object} source An optional "source" (perhaps a DOM element) which triggered this event
  */
myEdit.updateModel(newValue, source);

myEdit.model

fluid.inlineEdit("#myContainer", {
    blurHandlerBinder: ""
});
fluid.inlineEdit("#myContainer", {
    selectOnEdit: true
});
fluid.inlineEdit("#myContainer", {
    defaultViewText: ""
});
fluid.inlineEdit("#myContainer", {
    useTooltip: true
});
fluid.inlineEdit("#myContainer", {
    tooltipText: "Click to edit"
});
fluid.inlineEdit("#myContainer", {
    tooltipID: "myTooltip"
});
fluid.inlineEdit("#myContainer", {
    tooltipDelay: 500
});
selectors: {
    editables: ".flc-inlineEditable"
}

<script type="text/javascript" src="infusion-all.js"></script>

<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.position.js"></script>
<script type="text/javascript" src="lib/jquery/plugins/tooltip/js/jquery.ui.tooltip.js"></script>
<script type="text/javascript" src="framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="framework/core/js/FluidView.js"></script> 
<script type="text/javascript" src="framework/core/js/FluidIoC.js"></script> 
<script type="text/javascript" src="components/tooltip/js/Tooltip.js"></script>
<script type="text/javascript" src="components/inlineEdit/js/InlineEdit.js"></script>
<script type="text/javascript" src="components/undo/js/Undo.js"></script>

Description	This event is fired by the Rich Text Editors when the editing interface is fully initialized.
Type	default
Parameters	editor the instance of the editor component

Description	This event fires after the editing view has initialized and is ready for editing.
Type	default
Parameters	none

Description	This event fires when the Inline Edit component creates the editing view.
Type	default
Parameters	none

Description	This event fires before the Inline Edit component switched into edit mode.
Type	preventable
Parameters	none

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: "" });

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 });

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: "" });

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

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`

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

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`

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 }`

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

Please view or edit the documentation there, instead.

Inline Edit API

Inline Edit

Simple Text Inline Edit

Dropdown Inline Edit

Rich Text Inline Edit

Supported Events

afterInitEdit

afterBeginEdit

onCreateEditView

modelChanged

onBeginEdit

onFinishEdit

afterFinishEdit

Functions

Options

selectors

strings

listeners

styles

paddings

applyEditPadding

submitOnEnter

displayModeRenderer

editModeRenderer

displayAccessor

displayView

editAccessor

editVIew

lazyEditView

blurHandlerBinder

selectOnEdit

defaultViewText

useTooltip

tooltipText

tooltipID

tooltipDelay

Additional options for Multiple Inline Edits

InlineEdit Types

Dependencies

`afterInitEdit`

`afterBeginEdit`

`onCreateEditView`

`modelChanged`

`onBeginEdit`

`onFinishEdit`

`afterFinishEdit`

`selectors`

`strings`

`listeners`

`styles`

`paddings`

`applyEditPadding`

`submitOnEnter`

`displayModeRenderer`

`editModeRenderer`

`displayAccessor`

`displayView`

`editAccessor`

`editVIew`

`lazyEditView`

`blurHandlerBinder`

`selectOnEdit`

`defaultViewText`

`useTooltip`

`tooltipText`

`tooltipID`

`tooltipDelay`