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

The configuration of the Rich Text Inline Edit integrations is accomplished through a fluid.defaults object (for more information about component defaults, see Framework Functions#Defaults). The defaults for the two available integrations are described below.

NOTE: If you override any of these defaults, the Rich Text Inline Edit may not function properly.

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

selectors

The FCKEditor uses a <textarea> element, and so the default selector for this field is set to "textarea."

styles

 

displayAccessor

The standard display accessor uses the jQuery functions val or text depending on the tag type. The richTextAccessor returns the HTML contents of the element instead.

editAccessor

The standard edit accessor uses the jQuery functions val or text depending on the tag type. The FCKEditor.viewAccessor function uses the FCKEditor API to access the edit field.

lazyEditView

Loading a rich text editor is expensive, and so lazy loading is enabled.

editModeRenderer

The FCKEditor-specific edit mode renderer uses the FCKEditor itself.

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

selectors

TinyMCE uses a <textarea> element, and so the default selector for this field is set to "textarea."

styles

 

displayAccessor

The standard display accessor uses the jQuery functions val or text depending on the tag type. The richTextAccessor returns the HTML contents of the element instead.

editAccessor

The standard edit accessor uses the jQuery functions val or text depending on the tag type. The tinyMCE.viewAccessor function uses the TinyMCE API to access the edit field.

lazyEditView

Loading a rich text editor is expensive, and so lazy loading is enabled.

editModeRenderer

The TinyMCE-specific edit mode renderer uses TinyMCE itself.


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:

FCKEditor integration:

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery/jquery-1.3.1.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>
<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>

TinyMCE integration:

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="jquery/jquery-1.3.1.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>
<script type="text/javascript" src="jquery/jquery.tinymce.js"></script>
<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