With inline editing, multiple sections of the page can be editable using just the one instance of EditLive! While this makes it easy to get up and running, there are situations where you'd prefer to have different configurations for the editor for different sections of the page. Fortunately, since build 6.2.1.81 (which is available today via EditLive! Early Access), this is simple.

Since the editor is loaded when the user clicks within the editable section, we can use the onclick handler to modify the configuration of EditLive! to suit that particular section. Lets start with two editable sections, an abstract and a body. The code we'd need is:

<h2>Abstract</h2>
<div id="abstract" class="editable" style="width: 100%; height: 300px">
<p>Click here to enter the document abstract.</p>
</div>

<h2>Body</h2>
<div id="body" class="editable" style="width: 100%; height: 600px">
<p>Click here to enter the body content.</p>
</div>

<script language="JavaScript" src="editlivejava/editlivejava.js"></script>
<script language="JavaScript" src="editlivejava/inlineEditing.js"></script>
<script language="JavaScript" type="text/javascript">
var editlive;
editlive = new EditLiveJava("editlive", "100%", "100%");
editlive.setDownloadDirectory("editlivejava");
editlive.setConfigurationFile("editlivejava/sample_eljconfig.xml");
editlive.addEditableSection("abstract");
editlive.addEditableSection("body");
</script>

Now let's assume we want the abstract section to have a minimal interface to reduce the amount of space taken up by the toolbars and menus. First we create the customized configuration file - let's say we've saved it as abstractConfig.xml in the same directory as our HTML file. Next, we simply add an onclick handler to set the configuration file:

<div id="abstract" class="editable" style="width: 100%; height: 300px"
    onclick="editlive.setConfigurationFile('abstractConfig.xml');">
<p>Click here to enter the document abstract.</p>
</div>

Now when the user clicks in the abstract section, the editor will load with our minimal configuration. There's just one problem - once the user clicks on the abstract section, the editor always loads with the minimal configuration, even for the body. To fix this, we need to set the configuration file back when the user clicks on the body section:

<div id="body" class="editable" style="width: 100%; height: 600px"
    onclick="editlive.setConfigurationFile('editlivejava/sample_eljconfig.xml');">
<p>Click here to enter the body content.</p>
</div>

Now everything works as expected. So the two key points:

• You can change the configuration of EditLive! in an onclick handler and the changes will be applied for that section.
• If you change the configuration for one section, ensure you set the modified options for every section to ensure they are reset properly.

Remember, you need build 6.2.1.81 or above which is available from EditLive! Early Access for this to work. The changes will be rolled into a patch release of EditLive! in the future.

With inline editing, you can quickly and easily allow users to edit sections of a web page, but hidden in those simple APIs is a lot of power and flexibility that you can advantage of - without too much work. Over the next couple of weeks we'll take a look at some of the things you can do with inline editing to create rich editing environments for your users.

First, lets look at how to create a web page with a rich content field that can be repeated multiple times. To get started, we'll use a form for an article that already has inline editing enabled on the abstract and body elements. Take a look at Implementing EditLive! Inline Editing for a description of how to get the basics of inline editing working. The page also has the styles described in Using CSS To Make Inline Editing More Intuitive to make the editable areas stand out.

You can download the completed page and follow along so you can see things in context. To keep the article short, I'll just focus on the key parts that make the repeating appendices work.

The first thing to do is add a section in the document for Appendices:

<div id="appendices">
<h2>Appendices</h2>
<p><button onclick="addAppendix();" id="addAppendix">Add Appendix</button></p>
</div>

The addAppendix function will do the actual work of adding an appendix by:

• Creating the DOM elements for the appendix section with a DIV for the content and a remove button.
• Adding the appendix into the document at the right place.
• Telling EditLive! to make the new DIV editable.

First, here's the code to create the appendix DOM structure and insert it into the document. It uses standard JavaScript and you could create this section any way you prefer. Make sure that the DIV containing the content has a unique ID so that we can refer to it later.

var nextAppendixId = 1;
function createAppendix() {
  var appendixId = "appendix" + nextAppendixId;
  nextAppendixId++;
  var wrapper = document.createElement("div");
  var appendix = document.createElement("div");
  // Make the DIV part of the editable class so it displays correctly
  // and part of the appendix class so that we can size it correctly via CSS.
  appendix.className = "editable appendix";
  appendix.id = appendixId;
  wrapper.appendChild(appendix);

  // Add a remove button.
  var remove = document.createElement("button");
  remove.onclick = removeAppendix;
  remove.appendChild(document.createTextNode("Remove"));
  wrapper.appendChild(remove);
  document.getElementById("appendices").insertBefore(wrapper,
      document.getElementById("addAppendix").parentNode);
  return appendixId;
}

Not that we set the onclick function for the remove button to removeAppendix, we'll take a look at that in a moment. Now that we've got the DOM structure we need to add it to the document. We also used an incrementing variable to generate unique IDs for every appendix we add.

Now we get to the EditLive! specific part - making the appendix content editable. The addEditableSection call is all we need, but we also add a call to onclick so that the editor immediately loads, ready for the user to enter content.

var appendixId = createAppendix();
editlive.addEditableSection(appendixId);
// Simulate a click so that the editor loads, ready for the user to enter content.
document.getElementById(appendixId).onclick();

At this point the user can add appendices and edit them, but the remove button doesn't work. The removeAppendix function is just simple JavaScript again - it just has to remove the appendix DOM structure we added:

function removeAppendix() {
  var appendixWrapper = this.parentNode;
  appendixWrapper.parentNode.removeChild(appendixWrapper);
}

So it turns out that the hardest part of repeating sections is doing the JavaScript work to create and remove the section - to make it editable you simply call the addEditableSection function and give it the ID of the new DIV. To see it all in context, take a look at the final page.

Inline editing allows your users to simply click a section of the page and start editing which is great, but how do they know where they can click? By default, EditLive! displays a border and a pencil icon when the user mouses over the editable area which is nice if you want to precisely mimic the final view of the page, but we can easily make them more obvious with some simple CSS.

First up, the most important indication that an area is editable is having the cursor change to the I-beam like it does over text fields. The CSS cursor property lets us do that, so let's start by defining a class for our DIVs and added the cursor property:

.editable {
  cursor: text;
}

That's good, but the user still has to actually mouse over the section to discover it's editable. To fix that, let's make the DIV look like a text field by adding a border. The look matches a Windows text field, but it should be generic enough to be recognizable on any platform and subtle enough that it should fit in well with most site designs. Now we have:

.editable {
  cursor: text;
  border-top: 1px solid rgb(171, 173, 179);
  border-left: 1px solid rgb(226, 227, 234);
  border-bottom: 1px solid rgb(227, 233, 239);
  border-right: 1px solid rgb(219, 223, 230);
}

The end result looks and behaves just like a text area:

Since the area now looks editable by default, we'll finish up turn off the default styles that EditLive! adds using the disableObviousEditableSections() function:

editlive.disableObviousEditableSections();

That's all there is to it.

A new feature we've whipped up for the EditLive! 6.2 release is inline editing which allows users to select which portions of rich text they wish to edit in a webpage, rather than loading a new instance of EditLive! for each rich text field.

Implementing inline editing improves your end user experience through the following benefits:

• Faster loading of pages
• Less system resources consumed
• Cleaner, seamless editing interface
• Makes providing seamless inline editing to users extremely simple.

To integrate the EditLive! Inline Editing interface, follow these 3 easy steps:

Step 1) Include both the editlivejava.js and inlineEditing.js script files in your webpage.

<script type="text/javascript" language="JavaScript" src="editlivejava/editlivejava.js"></script>
<script type="text/javascript" language="JavaScript" src="editlivejava/inlineEditing.js"></script>

Step 2) Define each rich text area in your webpage as a DIV html element.

<form>
   …
   <div id="richText1" style="height: 550px;" ><p>div content</p></div>
   …
   <div id="richText2" style="height: 550px;" ><p>div content</p></div>
   …
</form>

Step 3) After the <form> element containing your DIVs, create a script block to define your instance of EditLive!. Add each inline editing section via the addEditableSection API.

…
</form>
<script language="Javascript">
// set the width and height of the editor to expand 100% within the selected DIV.
var editliveInstance = new EditLiveJava("editliveInstance", "100%", "100%");

// set the download directory (the location where the jar file containing the applet lives)
editliveInstance .setDownloadDirectory("editlivejava");

// set the configuration file (start with the sample one).
editliveInstance.setConfigurationFile("editlivejava/sample_eljconfig.xml");

// add the DIV with the id 'richText1'
editliveInstance.addEditableSection("richText1");

// add the DIV with the if 'richText2'
editliveInstance.addEditableSection("richText2");
</script>

This will produce a simple implementation of the inline editing solution for EditLive! When the user clicks in one of the registered
DIVs, an instance of EditLive! will appear in it's place containing the HTML contents of the DIV. When the user clicks into another
registered DIV, the instance of EditLive! will move to the newly selected DIV, leaving behind the updated content in the
previously selected DIV.

You can use any of the normal load time and runtime APIs with EditLive! to configure it as required, simply include them in the script block like normal.

You can also control whether or not EditLive! applies its CSS to help users identify editable DIVs or if you want to simply use your own with the setEditableSectionCSS API.