Child pages
  • Rich Text Inline Edit API

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

This documentation refers to the latest trunk version of the Inline Edit code.

Rich Text Inline Edit Overview

The Rich Text Inline Edit is a specific integration of the Inline Edit component that uses a rich text editor to allow users to quickly make edits to formatted text. Two versions of Rich Text Inline Edit are provided, each using a different rich text editor:

  1. FCKEditor
  2. TinyMCE


fluid.inlineEdit.FCKEditor(container, options);
fluid.inlineEdit.TinyMCE(container, options);
On This Page
Still need help?

Join the fluid-talk mailing list and ask your questions there.



The container is a CSS-based selector, single-element jQuery object, or DOM element that identifies the root DOM node of the Rich Text Inline Edit markup.


The options object is an optional collection of key/value pairs that can be used to further configure the Rich Text Inline Edit, as described below in the Options section.

Supported Events

The Rich Text Inline Edit component fires the following events:





Parameter Description



This event is fired once the inline edit component is initialized.


editor: the instance of the editor component



This event is fired any time the model for the component has changed, that is, any time the value of the text associated with the component has changed.

(model, oldModel, source)

model: The current (new) value of the "model" structure representing the editable state of the component
oldModel: A snapshot of the old value of the model structure before the current edit operation started
source: An arbitrary object which optionally represents the "source" of the change, which can be checked by listeners to prevent cyclic events. Can often be undefined.



This event fires just before the component switches from 'view' mode into 'edit' mode. Because the event is preventable, listeners may prevent the component from actually entering edit mode.





This event fires just after the component has finished entering 'edit' mode.





This event fires just before the component switches out of 'edit' mode, i.e. before the newly edited value is stored in the model. Because the event is preventable, listeners may prevent the new value from being stored in the model, i.e. they may cancel the edit.

(newValue, oldValue, editNode, viewNode)

newValue, oldValue: see parameters for modelChanged (model, oldModel)
editNode: A DOM node which holds the concrete editable control - this may vary in interpretation for different embodiments of the InlineEdit control but may, for example be an <input>, <textarea> or <select> node,
viewNode: A DOM node which holds the read-only representation of the editable value.



This event fires just after the newly edited value is stored in the model. Note that it only fires if the onFinishEdit event did not prevent the new value from being stored in the model.

newValue, oldValue, editNode, viewNode

(newValue, oldValue, editNode, viewNode): See description for onFinishEdit







an object containing CSS-based selectors for various parts of the Inline Edit

See Inline Edit Selectors

General options

List-specific options


The List Reorderer dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:

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

Alternatively, the individual file requirements are:

<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery/jARIA.js"></script>
<script type="text/javascript" src="jquery/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="jquery/jquery.tooltip.js"></script>
<!-- javascript files specific to the rich text editor of choice -->
<script type="text/javascript" src="fluid/Fluid.js"></script>
<script type="text/javascript" src="fluid/InlineEdit.js"></script>
<script type="text/javascript" src="fluid/InlineEditIntegrations.js"></script>
  • No labels