EditLive! 9 Documentation : Creating a Minimal Editing UI with In-place Editing

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.

Set the Configuration File
<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.

Float the Main Toolbar
<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.

Minimal Toolbar Configuration
<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.

Combine Floating Toolbars
<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

Turn Off EditLive!'s Tabs
<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.

Use CloseOnFocusLost
<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.

Use ResizeableSections
<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 HTML and JavaScript Code
<!DOCTYPE HTML>
<html>
<head>
<title>EditLive Demonstrations</title>
<script type="text/javascript" src="editlivejava/editlivejava.js"></script>
</head>
<body>
	<h1 style="text-align:center;">EditLive! Demonstrations</h1>	
	<div style='width:700px;margin:auto' id="FirstDIV">
		<h2 style=" text-align: left;">EditLive! - Works Like a Rich Text Editor Should</h2>
		<p><em>EditLive! is the rich text editor that works like a rich text editor should. No reformatting. No stress. No kidding.</em></p>
		<p><strong>Copy and paste</strong>&#160;content seamlessly, no matter where your content comes from: Microsoft Word, Excel or any web site.</p>
		<p><strong>Image editing</strong> is a breeze with EditLive!'s built in image editor.</p>
		<p><strong>Avoid mistakes. </strong> EditLive! includes out of the box capabilities such as <strong>spell check as you type</strong>, a&#160;<strong>thesaurus</strong>&#160;and&#160;<strong>hyperlink checking</strong>. And you get all of this without the need to license, install or configure any third party software.</p>
	</div>
	<p>&nbsp;</p>
	<div style='width:700px;margin:auto' id="SecondDIV">
		<h2>Make Image Editing a Breeze</h2>
		<p>With a&#160;<strong>built-in image editor</strong>, EditLive! makes editing images a breeze.</p>
		<p>EditLive! is the only online rich text editor that enables you to:</p>
		<ul>
		<li>Resize and resample images</li>
		<li>Crop</li>
		<li>Rotate left and right</li>
		<li>Flip vertically and horizontally</li>
		<li>Add rounded corners, drop shadow and reflection effects</li>
		</ul>
	</div>
	<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>
</body>
</html>

Complete Configuration

Complete Configuration
<?xml version="1.0" encoding="utf-8"?>
<editlive>
    <document>
        <html>
            <head>
                <link rel="stylesheet" href="yourserver.com/css/basic.css"/>
            </head>
            <!--
            Default document body. Add content here if you want this to be the default when the editor
            loads, although this is better done at runtime.
            -->
            <body>
            </body>
        </html>
    </document>
    <!--
    Add your Ephox-provided license key here
    -->
    <ephoxLicenses>
        <license
            domain="LOCALHOST"
            key="6FFF-7C38-9CFD-AE9B"
            licensee="For Evaluation Only"
            release="9.0"
            type="Evaluation License"
            productivityPack="true"
        />
    </ephoxLicenses>
    <spellCheck startBackgroundChecking="true" startAutoCorrect="true"/>
    <htmlFilter
        outputXHTML="true"
        outputXML="false"
        xhtmlStrict="false"
        indentContent="false"
        logicalEmphasis="true"
        quoteMarks="false"
        uppercaseTags="false"
        uppercaseAttributes="false"
        wrapLength="0">
    </htmlFilter>
	
	<!-- Set Tab Placement to "off" -->
    <wysiwygEditor
        tabPlacement="off"
        brOnEnter="false"
        showDocumentNavigator="false"
        disableInlineImageResizing="false"
        disableInlineTableResizing="false"
        enableTrackChanges="false"
    >
    </wysiwygEditor>
    <sourceEditor showBodyOnly="true"/>
    <wordImport styleOption="clean"/>
    <excelImport styleOption="merge_inline_styles"/>
    <htmlImport styleOption="merge_inline_styles"/>
    <plugins>
        <plugin name="autosave" />
        <plugin name="autolink" />
        <plugin name="insertHTML" />
        <plugin name="rtfpaste"/>
        <plugin name="setBackgroundMode"/>
        <plugin name="spelling" />
        <plugin name="tableToolbar" />
        <plugin name="accessibility" />
        <plugin name="imageEditor" />
        <plugin name="BrokenHyperlinkReport" />
        <plugin name="commenting" />
        <plugin name="templateBrowser" />
    </plugins>
   
    <templates>
    </templates>
    <accessibilityChecks
        errors="true"
        warnings="true"
        manual="true"
        WCAG1="true"
        WCAG2="true"
        Section508="true"
        inlineAccessibility="false"
        emptyImageAlt="error"
        tableMappingIssues="warn"
    />
    <mediaSettings>
       <images allowLocalImages="true" allowUserSpecified="true" preferredWidth="800" preferredHeight="600">
            <imageDialog width="700" height="350" />
              <imageList>
            </imageList>
        </images>
        <multimedia>
        	<services>
                <service name="YouTube" endpoint="http://www.youtube.com/oembed" scheme="http://*.youtube.com/*" />
                <service name="Twitter" endpoint="https://api.twitter.com/1.1/statuses/oembed.json" scheme="*twitter.com/*" />
                <service name="Vimeo" endpoint="http://vimeo.com/api/oembed.json" scheme="http://vimeo.com/*" />
                <service name="Slideshare" endpoint="http://www.slideshare.net/api/oembed/2" scheme="http://www.slideshare.net/*/*" />
                <service name="Flickr" endpoint="http://www.flickr.com/services/oembed/" scheme="http://*.flickr.com/*" />
                <service name="Instagram" endpoint="http://api.instagram.com/oembed" scheme="http://www.instagram.com/*/*" />
                <service name="Embed.ly" endpoint="http://api.embed.ly/1/oembed" scheme="*" />
            </services>
            <types>
            </types>
        </multimedia>
    </mediaSettings>
    <hyperlinks>
        <hyperlinkList>
            <hyperlink href="http://docs.ephox.com/display/EditLive/hyperlinkList" description="How To Update This List" />
            <hyperlink href="http://www.ephox.com" description="Ephox Web site" />
            <hyperlink href="http://docs.ephox.com" description="Ephox Documentation" />
            <hyperlink href="http://support.ephox.com/" description="Ephox Support" />
            <hyperlink href="http://releases.ephox.com" description="Ephox Releases" />
        </hyperlinkList>
        <mailtoList>
            <mailtolink href="mailto:sales@ephox.com" description="Ephox Sales" />
        </mailtoList>
    </hyperlinks>

	<!-- Remove the menuBar element --> 
	
	<!-- Minimize the toolbar configuration and float the toolbar-->
    <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="Popout"/>
        </toolbar>
    </toolbars>
	<!-- Display the inline toolbars contextually on the main toolbar -->
    <inlineToolbars showOnMainToolbar="true">
        <inlineToolbar name="img">
            <toolbarButton name="rotateCCW"/>
            <toolbarButton name="rotateCW"/>
            <toolbarSeparator />
            <toolbarButton name="flipVertical"/>
            <toolbarButton name="flipHorizontal"/>
            <toolbarSeparator />
            <toolbarButton name="reflect"/>
            <toolbarButton name="dropShadow"/>
            <toolbarButton name="roundedCorners"/>
            <toolbarSeparator />
            <toolbarButton name="crop"/>
        </inlineToolbar>
        <inlineToolbar name="table">
            <toolbarButton name="InsRow"/>
            <toolbarButton name="InsCol"/>
            <toolbarButton name="DelRow"/>
            <toolbarButton name="DelCol"/>
            <toolbarButton name="DelTable"/>
            <toolbarSeparator />
            <toolbarButton name="Split"/>
            <toolbarButton name="Merge"/>
            <toolbarSeparator />
            <toolbarButton name="tableautofit"/>
            <toolbarButton name="percentageTableSizing" />
            <toolbarButton name="pixelTableSizing" />
            <!--  Enterprise Edition Features -->
            <toolbarSeparator />
            <toolbarButton name="ApplyCellHeaders"/>
            <toolbarButton name="ClearCellHeaders"/>
            <toolbarButton name="TableHeaderMappings"/>
            <toolbarSeparator />
            <toolbarButton name="Gridlines"/>
        </inlineToolbar>
    </inlineToolbars>
    <shortcutMenu>
        <shrtMenu>
            <shrtMenuItem name="Undo"/>
            <shrtMenuItem name="Redo"/>
            <shrtMenuSeparator/>
            <shrtMenuItem name="Cut"/>
            <shrtMenuItem name="Copy"/>
            <shrtMenuItem name="Paste"/>
            <shrtMenuSeparator/>
            <shrtMenuItem name="Select"/>
            <shrtMenuSeparator/>
            <!-- Enterprise Edition Features -->
            <shrtMenuItem name="AddComment"/>
            <shrtMenuItem name="acceptChange"/>
            <shrtMenuItem name="rejectChange"/>
            <shrtMenuItem name="nextchange"/>
            <shrtMenuItem name="previouschange"/>
            <shrtMenuSeparator/>
            <shrtMenuItem name="Hyperlink"/>
            <shrtMenuItem name="RemoveHyperlink"/>
            <shrtMenuItem name="PropImage"/>
            <shrtMenuItem name="EditMedia"/>
            <shrtMenuItem name="PropObject"/>
            <shrtMenuItem name="PropList"/>
            <shrtMenuItem name="PropHR"/>
            <shrtMenuItem name="PropSection"/>
            <shrtMenuItem name="PropForm"/>
            <shrtMenuItem name="PropFormField"/>
            <shrtMenuSeparator/>
            <shrtMenuItem name="Split"/>
            <shrtMenuItem name="Merge"/>
            <shrtMenuItem name="tableautofit"/>
            <shrtMenuSeparator/>
            <shrtMenuItem name="PropTable"/>
            <shrtMenuItem name="PropRow"/>
            <shrtMenuItem name="PropCol"/>
            <shrtMenuItem name="PropCell"/>
            <shrtMenuSeparator/>
            <shrtMenuItem name="synonyms"/>
            <shrtMenuItem name="EditTag"/>
        </shrtMenu>
    </shortcutMenu>
</editlive>