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 11 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

Creation

fluid.inlineEdit.FCKEditor(container, options);
fluid.inlineEdit.TinyMCE(container, options);

Return: The Dropdown Inline Edit component object.

On This Page
Still need help?

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

Configuration

The Rich Text Inline Edit is a specific configuration of the Inline Edit component. It's API is fundamentally the same as the Simple Text Inline Edit API, but some of the options are pre-configured.

Pre-configuration

FCKEditor integration:

fluid.defaults("fluid.inlineEdit.FCKEditor", {
    selectors: {
        edit: "textarea" 
    },
    
    styles: {
        invitation: null
    },
  
    displayAccessor: "fluid.inlineEdit.richTextViewAccessor",
    editAccessor: "fluid.inlineEdit.FCKEditor.viewAccessor",
    lazyEditView: true,
    editModeRenderer: fluid.inlineEdit.FCKEditor.editModeRenderer
});

TinyMCE integration:

fluid.defaults("fluid.inlineEdit.tinyMCE", {
    useTooltip: true,
    selectors: {
        edit: "textarea" 
    },
    
    styles: {
        invitation: null
    },
    displayAccessor: "fluid.inlineEdit.richTextViewAccessor",
    editAccessor: "fluid.inlineEdit.tinyMCE.viewAccessor",
    lazyEditView: true,
    editModeRenderer: fluid.inlineEdit.tinyMCE.editModeRenderer
});

Dependencies

The Rich Text Inline Edit 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