Pasting Scripts into contents

We show how to place the Facebook "Like Button" as script in the demo article content and give a formatter that renders the script - but only if the content is not edited or moved, in such a case a reload is necessary.

1 The result

 

Facebook Like button

Click the button to "like" OpenCms on facebook.

 

2 Example resources and the interesting spots

The demo article content has an element Script of type OpenCmsString. Edit the above content presented as result to see its structure. To let you paste and edit scripts easily the TextareaWidget is configured for the Script element. Have a look at the <layout>-node in the XSD that defines the widget:

/system/modules/com.alkacon.opencms.documentation/schemas/demo/documentation-demo-article.xsd
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"
	elementFormDefault="qualified">

	<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd" />

	<xsd:element name="DocumentationDemoArticles" type="OpenCmsDocumentationDemoArticles" />

	<xsd:complexType name="OpenCmsDocumentationDemoArticles">
		<xsd:sequence>
			<xsd:element name="DocumentationDemoArticle" type="OpenCmsDocumentationDemoArticle"
				minOccurs="0" maxOccurs="unbounded" />
		</xsd:sequence>
	</xsd:complexType>

	<xsd:complexType name="OpenCmsDocumentationDemoArticle">
		<xsd:sequence>
			<xsd:element name="Title" type="OpenCmsString" />
			<xsd:element name="Text" type="OpenCmsHtml" />
			<xsd:element name="Image" type="OpenCmsVfsImage" minOccurs="0" />
			<xsd:element name="Script" type="OpenCmsString" minOccurs="0" />
		</xsd:sequence>
		<xsd:attribute name="language" type="OpenCmsLocale" use="optional" />
	</xsd:complexType>

	<xsd:annotation>
		<xsd:appinfo>
			<layouts>
				<layout element="Script" widget="TextareaWidget" configuration="10" />
			</layouts>
			<mappings>
				<mapping element="Title" mapto="urlName" />
			</mappings>
		</xsd:appinfo>
	</xsd:annotation>
</xsd:schema>

To add the script to your page, a special formatter for the demo article is provided. It checks, if the script is present and if the content was moved to another container or edited (via ${cms.edited}). If a script is present and the content was not edited or moved, it inserts the script. Otherwise it prints a hint to insert a script or reload the page. This hint is for example shown if the content is previewed in various containers while moving it. When the content is dropped ${cms.enableReload} enforces an automatical reload of the page - and the script is shown. The same happens when the content is edited.

/system/modules/com.alkacon.opencms.documentation/formatters/demo/demo-article-paste-script.jsp
<%@page buffer="none" session="false" taglibs="c,cms" %>
<cms:formatter var="content" val="value">
<div style="margin-bottom:30px;">
    <div class="headline"><h3>${value.Title}</h3></div>
    <%-- The text field of the article with image --%>
    ${value.Text}
    <hr />
	<%-- Check if the script field is available. --%>
    <%-- ".isSet" checks if the Script node exists and not empty --%>
    <%-- ${cms.edited} marks that the element have been just edited --%>
    <c:choose>
    <c:when test="${!value.Script.isSet}">
		Please add a script.
	</c:when>
	<c:when test="${cms.edited}">
		<!-- enforce an automatical reload, when the content is edited or moved to another container -->
		${cms.enableReload}
        <p>Script result not available after edit or move operation. Page is automatically reloaded.</p>
    </c:when>
    <c:otherwise>
		${value.Script}
    </c:otherwise>
	</c:choose>
</div>
</cms:formatter>