Front-end Editing

Overview

For users with the appropriate level of access, ExpressionEngine Pro adds “front edit” links ( ) on the site’s front-end that allow editing the contents of each entry field individually. This is done directly on front-end without going to the Control Panel.

Clicking the link opens a popup with the field that can be modified and saved. Along with editing, users can also use front edit popup to access the full entry for editing with live preview showing the current page you are on.

The links are being placed in your HTML right before the field’s tag (or opening tag if field tag pair is used).

Permissions: Users must be logged-in on the front-end of your site and must have a role assigned to them which allows them to access and edit content for that entry’s channel.

.

Saving Content

After editing data, content can be saved by one of two ways:

• Clicking on “Save”, which will trigger a page reload

• Clicking the alternate “Save without Reload”, which will save the content without reloading the page. This would require a manual page refresh to see any updated content.

Unsaved Changes

When a user edits data and has unsaved changes, Pro will create an autosave of the entry and alert the user via a notification on the edit window with unsaved changes. The autosave is triggered based on the default autosave interval of 60 seconds. If you want to ensure users do not accidentally lose unsaved changes adjust the [autosave_interval_seconds] system config override to a lower interval between autosaves. A setting of 10 seconds is the recommendation.

Note: If the [autosave_interval_seconds] system config value was not previously changed, Pro will set this value at 10 seconds upon install.

Example Usage:

$config['autosave_interval_seconds'] = '10'; 

Conditional Tags

Enable/Disable The Front Edit Link

There are several ways to disable front-end editing links:

• Globally with configuration overrides or in General Settings
• Per field in the field settings
• Via the Dock on the front-end by toggling Edit Mode on/off.
• In the template by using ExpressionEngine template comments, HTML comments, or field parameter

<h1>{!-- disable frontedit --}{title}{!-- //disable frontedit --}</h1>

<h1><!-- disable frontedit -->{title}<!-- //disable frontedit --></h1>

{page_content disable="frontedit"}

Customizing The Link Location

The edit link for each field can be placed manually using :frontedit modifier on the field or using the frontedit_link tag if you need to have a link in a different section of a template, custom styled, or you can even place a link for a field that is currently not on the page.

{title:frontedit}

<h1>
    <!-- disable frontedit -->{title}<!-- //disable frontedit -->
    {frontedit_link entry_id="{entry_id}" field_name="title"}
</h1>

{page_content disable="frontedit"}
{frontedit_link entry_id="{entry_id}" field_name="page_content" class="extra-styles"}

{if frontedit}Edit Entry Title{/if}{frontedit_link entry_id="{entry_id}" field_name="title"}

Reinitialize ExpressionEngine Pro Javascript

There may be times, such as when using AJAX, that page content is loaded after ExpressionEngine Pro has been initialized on a page. When this happens edit links may not work or even render. To fix this, you need to included EE.pro.refresh(); in your script.

Example usage:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : reInitPro
    })
}

function reInitPro(){
    EE.pro.refresh();
}