In-place editing with EditLive! is ideal for when you want to create a minimalist editing UI. The code for the integration uses the same techniques as the Creating Editable Sections example. It uses EditLive!'s configuration options and JavaScript API to minimize the visual appearance of the editor in the page. This enables you to construct interfaces that enable authors to quickly switch between reading content and editing content.
In-place editing is not a separate integration mode or methodology. Rather it is a visual design pattern that uses several EditLive! configuration options and JavaScript API settings to create a minimalist editing user interface. While this example uses several of these settings and APIs it's also possible to use these settings and APIs in isolation. For example, if you had an EditLive! instance where you wanted to remove the menu bar but have docked toolbars then this would be achieved by simply removing the menu bar as explained in step 3 of this guide - none of the other steps need be followed.
This article assumes that you've deployed EditLive! to your web server and you're ready to start integrating EditLive!.
The editlivejava directory now hosted on your web server includes all the files you need to get started with creating your own EditLive! integration.
This example takes you through the steps needed to put an instance of EditLive! into a web page using in-place editing. It is an extension of the Creating Editable Sections example.
1. Integrate EditLive! Using Editable Sections
To begin with integrate EditLive! in the same was as the Creating Editable Sections example.
Important
It is recommended that a doctype be used on your webpage to ensure that Internet Explorer does not use IE5 Quirks mode. Inline sections may not resize correctly in Internet Explorer if the page is using IE5 Quirks mode.
See the W3C Recommended list of Doctype declarations for information on doctype declarations that can be used.
2. Use a New Configuration File
Create a copy of the sample_eljconfig.xml file contained within the editlivejava directory and rename it as inplace_editing.xml. Point the EditLive! instance at this file using the setConfigurationFile method.
<script type="text/javascript">
//Create an EditLive! instance
var editlive = new EditLiveJava("ELApplet");
//Assign the EditLive! instance to work with the named DIVs in the content
editlive.setConfigurationFile("editlivejava/inplace_editing.xml");
editlive.addEditableSection("FirstDIV");
editlive.addEditableSection("SecondDIV");
</script>
3. Configure EditLive! to Use Floating Toolbars
in this step we're going to alter the configuration of EditLive! by editing the inplace_editing.xml file. We'll configure EditLive! to use a minimal set of floating toolbars to deliver rich text editing functionality. Each of the configuration options used in this step can be used independently and in isolation to alter the user interface of the editor. When used together though they enable you to create a streamlined, minimalistic editing interface without compromising on functionality.
Remove the Menus, the Menu Bar and the About EditLive! menu
Find the <menuBar> element in your configuration file and remove the element and all its contents. This will remove menus from EditLive!'s interface.
Important
When you remove the About EditLive! menu by removing the menuBar element completely you must either use the helpMenu megamenu on the toolbar to make the About EditLive! dialog available or replicate the open source licensing information contained within the About EditLive! dialog in another place within your software and/or documentation.
Use a Floating Toolbar
Set EditLive!'s main toolbar to appear as a floating toolbar within the editor by modifying the <toolbars> element.
<toolbars display="floating"> ... </toolbars>
Minimize the Toolbar Button Set
To maximize the effectiveness of inline toolbars it's recommended that you use a minimal set of toolbar buttons. The following toolbar configuration item provides a toolbar appropriate for an EditLive! instance of approximately 700px wide.
This toolbar uses several megamenus to collapse commands under a single toolbar button.
Note
Floating toolbars are still able to support multiple rows of toolbars and will wrap appropriately when the editor resizes. It's simply recommended to minimize the toolbar to improve the aesthetic of this integration method.
<toolbars display="floating">
<toolbar name="Command">
<toolbarComboBox name="Style">
<comboBoxItem name="P"/>
<comboBoxItem name="H1"/>
<comboBoxItem name="H2"/>
<comboBoxItem name="H3"/>
<comboBoxItem name="H4"/>
<comboBoxItem name="H5"/>
<comboBoxItem name="H6"/>
</toolbarComboBox>
<toolbarSeparator/>
<toolbarbutton name="textFormattingMenu"/>
<toolbarSeparator/>
<toolbarButton name="alignIndentMenu"/>
<toolbarSeparator/>
<toolbarButtonGroup name="List"/>
<toolbarSeparator/>
<toolbarButton name="HLink"/>
<toolbarButton name="ImageServer"/>
<toolbarButton name="InsertMedia"/>
<toolbarButton name="InsTableWizard"/>
<toolbarSeparator/>
<toolbarbutton name="checkerMenu"/>
<toolbarSeparator/>
<toolbarButton name="AddComment"/>
<toolbarButton name="enableTrackChanges"/>
<toolbarSeparator/>
<toolbarbutton name="helpMenu"/>
<toolbarbutton name="pagewidth"/>
<toolbarButton name="Popout"/>
</toolbar>
</toolbars>
Combine Inline Toolbars and Floating Toolbars
EditLive! provides a set of floating inline toolbars for table and image manipulation. To achieve a consistent visual effect these can be combined with the main toolbar as a dynamic toolbar by configuring the <inlineToolbars> element.
<inlineToolbars showOnMainToolbar="true"> ... </inlineToolbars>
4. Turn Off EditLive!'s Preview, Design and Code Tabs
Removing EditLive!'s tabs and the borders associated with them will "hide" the editor. EditLive! will indicate an editable section in the document by displaying a surrounding blue border when the mouse hovers over the editable text. Tabs are removed by configuring the tabPlacement attribute of the <wysiwygEditor> element
<wysiwygEditor tabPlacement="off"></wysiwygEditor>
5. Use CloseOnFocusLost
Adding the CloseOnFocusLost method to your EditLive! objects will ensure that EditLive! closes when the user clicks outside of the editable section.
<script type="text/javascript">
//Create an EditLive! instance
var editlive = new EditLiveJava("ELApplet");
//Assign the EditLive! instance to work with the named DIVs in the content
editlive.setConfigurationFile("editlivejava/inplace_editing.xml");
editlive.setCloseOnFocusLost(true);
editlive.addEditableSection("FirstDIV");
editlive.addEditableSection("SecondDIV");
</script>
6. Use ResizableSections
Adding the ResizableSections method to your EditLive! objects will enable them to vertically expand and contract to better fit the size of the content they contain. If using this setting in conjunction with the other options in this guide will result in EditLive!'s vertical scroll bar being removed. Instead the editor will expand down the page to fit its current content.
<script type="text/javascript">
//Create an EditLive! instance
var editlive = new EditLiveJava("ELApplet");
//Assign the EditLive! instance to work with the named DIVs in the content
editlive.setConfigurationFile("editlivejava/inplace_editing.xml");
editlive.setCloseOnFocusLost(true);
editlive.setResizableSections(true);
editlive.addEditableSection("FirstDIV");
editlive.addEditableSection("SecondDIV");
</script>
Complete HTML and JavaScript Code
Complete Configuration