Child pages
  • Tutorial - Rich Text Inline Edit

Versions Compared

Key

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

...

Step 1: Prepare your markup

...

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

In a browser window, this might look something like this:

Image Removed

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">
  <span 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>
  </span>

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

...