Inline editing

Inline editing means that you can click directly on content, in particular text, and edit it. We demonstrate inline editing for a demo article, presenting a formatter that enables inline editing.

1 The result

Click on one of the texts in the example below - or even on the picture and see what happens.

 

Please edit me!

You can directly edit the title and this text.

 

2 Example resources and the interesting spots

In the above example, we formatted the demo article content. All the inline editing "magic" is enabled in the formatter via rdfa annotations at tags.

Below you see the formatter used for the above example.

/system/modules/com.alkacon.opencms.documentation/formatters/demo/demo-article-inline-editing.jsp
<%@page buffer="none" session="false" taglibs="c,cms" %>
<cms:formatter var="content" val="value" rdfa="rdfa" >
<div style="margin-bottom:30px;" ${not value.Image.isSet?rdfa.Image:""} >
    <div class="headline"><h3 ${rdfa.Title}>${value.Title}</h3></div>
	<c:if test="${value.Image.isSet}">
		<div style="float:left;" ${rdfa.Image}>
			<cms:img src="${value.Image}" height="100" width="300" />
		</div>
	</c:if>
    <div ${content.rdfa.Text}>
        ${value.Text}
    </div>
	<div style="clear:left;"></div>
</div>
</cms:formatter>

The example uses rdfa-annotations for three content elements: Title, Text and Image. For elements of type OpenCmsString, as Title and Text it is necessary that the annotations are placed directly at the tags surrounding the unmanipulated values read from the content.

For the image, the rdfa-annotation results in an edit point at the right-hand side of the inline editor. Hovering over such an edit point, the annotated block element is highlighted. Here, the annotations have just to be placed at some (block) element. This holds for all elements that are not of type OpenCmsString.

Note that, if no picture is present, the rdfa-annotation is placed differently. If no picture exists, a plus symbol is shown instead of an edit point.