Child pages
  • Tutorial - Rich Text Inline Edit

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Let's assume that you're working with some HTML that displays the information about a CD in your collection - something simple like this:

Code Block
html
html

<h1>Album Details</h1>

<h2>Artist</h2>
Portishead

<h2>Album</h2>
Third

<h2>Year</h2>
2008

<h2>Label</h2>
Universal Music

<h2>Review</h2>
<p>After a hiatus, <strong>Portishead</strong> is back with their first studio

album in 6 years. <em>Third</em> brings back the familiar and
the new, and none of this is best exemplified than in the track
<em>Machine Gun</em>.</p>

<p>It seems that regardless of how <strong>Portishead</strong> sounds now, the one
thing that has stayed constant is their refusal to be ordinary.</p>

The Changes

Section
Column

The simplest way to make many pieces of text editable requires you to do three things:

  1. define the block of text you want to make editable by using a container.
  2. define how you want the rich inline edit component to look by using a container.
  3. group the above two containers inside a parent container.

If we want to make the review editable editable, then we could

  1. wrap entire review text inside a <span> element and give it the default class flc-inlineEdit-text.
  2. create a new <span> element with the default class name flc-inlineEdit-editContainer. We also define how big we want the rich edit field to be, and add Save and Cancel buttons.
  3. place the above two <span> containers inside a <div> and give it a unique ID.

This might look like the HTML sample to the right.

Column
Code Block
html
html

...

<h1>Album Details</h1>

<h2>Artist</h2>
Portishead

<h2>Album</h2>
Third

<h2>Year</h2>
2008

<h2>Label</h2>
Universal Music

<h2>Review</h2>
<div id="cd-review">
  

...

<div class="flc-inlineEdit-text">
    <p>After a hiatus, <strong>Portishead</strong> is back with their first studio
    

...

album in 6 years. <em>Third</em> brings back the familiar and
    the new, and none of this is best exemplified than in the track
    <em>Machine Gun</em>.</p>

    <p>It seems that regardless of how <strong>Portishead</strong> sounds now, the one
    thing that has stayed constant is their refusal to be ordinary.</p>
  </

...

div>

  

...

<div class="flc-inlineEdit-editContainer">
    <textarea rows="10" cols="80" ></textarea>
    <button class="save">Save</button> <button class="cancel">Cancel</button>
  </

...

div>
</div>
That's all - these are the only changes you need to make to your HTML.

...

Code Block
javascript
javascript

function makeButtons(editor) {
  $(".save", editor.container).click(function(){
    editor.finish();
    return false;
  });

  $(".cancel", editor.container).click(function(){
    editor.cancel();
    return false;
  });
}

...

Code Block
javascript
javascript

var richEditor = fluid.inlineEdit.tinyMCE("#cd-review", {tinyMCE: {width: 1024}});
makeButtons(richEditor);

...

Code Block
javascript
javascript

var richEditor = fluid.inlineEdit.FCKEditor("#cd-review",
   {FCKEditor: {BasePath: "/lib/fckeditor/"}});
makeButtons(richEditor);

...

Code Block
javascript
javascript

function makeButtons(editor) {
  $(".save", editor.container).click(function(){
    editor.finish();
    return false;
  });

  $(".cancel", editor.container).click(function(){
    editor.cancel();
    return false;
  });
}

var richEditor = fluid.inlineEdit.tinyMCE("#cd-review", {tinyMCE: {width: 1024}});
makeButtons(richEditor);

...

FCKEditor Inetgration:

Code Block
html
html

<script type="text/javascript" src="lib/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="InfusionAll.js"></script>

TinyMCE Inetgration:

Code Block
html
html

<script type="text/javascript" src="lib/tiny_mce//tiny_mce.js"></script>
<script type="text/javascript" src="InfusionAll.js"></script>

Alternatively, the individual file requirements if using FCKEditor are:

Code Block
html
html

<script type="text/javascript" src="lib/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/ui.core.js"></script>
<script type="text/javascript" src="lib/jquery/plugins/tooltip/js/jquery.tooltip.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="components/inlineEdit/js/InlineEdit.js"></script>
<script type="text/javascript" src="components/inlineEdit/js/InlineEditIntegrations.js"></script>

Otherwise, the individual file requirements if using TinyMCE are:

Code Block
html
html

<script type="text/javascript" src="lib/tiny_mce//tiny_mce.js"></script>
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/ui.core.js"></script>
<script type="text/javascript" src="lib/jquery/plugins/tooltip/js/jquery.tooltip.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="components/inlineEdit/js/jquery.tinymce.js"></script>
<script type="text/javascript" src="components/inlineEdit/js/InlineEdit.js"></script>
<script type="text/javascript" src="components/inlineEdit/js/InlineEditIntegrations.js"></script>

...