Search the documentation
 Show GitHub edit links  Hide GitHub edit links
Documented since: 9.0 Latest revision for: 9.0 Valid for OpenCms: 10.5.3

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.

The result

Click on one of the pieces of text 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.

 

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 on tags.

Below you see the formatter used for the above example.

<%@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 on 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 just have to be placed on 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.

You can improve this page

Please contribute your suggestions or comments regarding this topic on our wiki. For support questions, please use the OpenCms mailing list or go for professional support.