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.
Step 2) Define each rich text area in your webpage as a DIV html element.
<div id="richText1" style="height: 550px;" ><p>div content</p></div>
<div id="richText2" style="height: 550px;" ><p>div content</p></div>
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.
// 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)
// set the configuration file (start with the sample one).
// add the DIV with the id 'richText1'
// add the DIV with the if 'richText2'
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.