Alfresco Web Editor Introduction to Alfresco Web Editor: installation, configuration and set most important parameter.
Alfresco Web Editor (AWE) is a Spring Surf based web application that utilises the Forms Service to provide in-context editing capabilities to Alfresco repository content (non AVM).
This page provides details on deploying and configuring AWE using the distributed artifacts, alternatively, to get up and running quickly using the latest code in HEAD you may prefer this Getting Star ted guide.
Documentation about the client side framework can be found at the Web_Editor_Framework page.
The distribution of AWE consists of a single zip file named alfresco-community-webeditor-.zip (at the time of writing only available from the nightly build).
Indice dei contenuti
The simplest and quickest way to deploy AWE is to use the pre-built WAR (awe.war) file and deploy it in the same application server instance of your web application.
Being a Spring Surf based application AWE does not have to be deployed in the same application server instance as the Alfresco repository, however, this section presumes that it is.
Diagram below depicts this.
‘Web Application’ box represents your web application. AWE tag library provides the ability to mark areas of the page as editable.
The file named ‘alfresco-webeditor-taglib-
<%@ taglib uri=”http://www.alfresco.org/tags/awe” prefix=”awe” %>
Once the tag library is declared the ‘startTemplate’, ‘endTemplate’ and ‘markContent’ tags can be used within your application.
Full documentation on the tag libraries can be found below.
An example application (customer.war) is also available demonstrating how to integrate and use the AWE tag library, full details of the customer sample can also be found below.
Marking content using the ‘markContent’ tag result in an edit icon appearing in your application, clicking this icon results in a form being displayed to allow the content and/or properties to be edited.
It’s highly unlikely that the default form configuration provided out of the box will be sufficient, a configuration file hook is therefore provided by the awe.war to allow custom form configuration to be provided.
Presuming your Tomcat instance is set up to allow for shared classes a file named “awe-config-custom.xml” can be placed in the shared/classes/alfresco/web-extension folder which can contain your custom form configuration.
Spring Surf Application Deployment
AWE distribution also includes all the files required to provide the AWE functionality within an existing Spring Surf application, to do so copy the following files to your application’s WEB-INF/lib folder:
The YUI and spring-webeditor JAR files represent the Web Editor Framework (WEF) which AWE is built upon.
Details of the WEF can be found here.
The remaining 2 JAR files provide the AWE functionality.
If you plan to use AWE within the app (as opposed to the application just being a host for the AWE services) you will also require the following 2 files to be copied into WEB-INF/lib:
Tag library is made up of 3 tags, “startTemplate”, “markContent” and “endTemplate”.
The startTemplate tag bootstrap’s the WEF via a “script” element that executes a webscript, this tag should therefore be placed in the “head” section of your page.
StartTemplate tag has only one optional attribute.
The toolbarLocation attribute controls the initial location of the toolbar, valid values are “top”, “left” and “right”, the default is “top”.
An example use of the startTemplate tag is shown below.
<awe:startTemplate toolbarLocation="top" />
This tag renders the following HTML (presuming the default contextPath is being used).
id – The mandatory id attribute specifies the NodeRef of the Alfresco node to be edited.
title – The mandatory title attribute defines a descriptive title for the editable area being marked. The title used will be used in the quick edit drop down menu of editable items, as the title of form edit popup/dialog and the ‘alt’ text and tooltip text of the edit icon.
formId – The optional formId attribute specifies which form will be used when the marked area is edited. See the Form Configuration section below for more details.
nestedMarker – The optional nestedMarker attribute defines whether the editable area is nested within another HTML tag that represents the content being edited. If set to “true” the whole parent element is highlighted when the area is selected in the quick edit drop down menu. If set to “false” only the edit icon is highlighted.
The markContent tag has two mandatory attributes and two optional attributes.
The result of the tags “awe” is show in figure: