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.

This entry is filed under Inline Editing. You can follow any responses to this entry through the Atom feed. You can leave a response, or trackback from your own site.