You have been redirected from an outdated version of the article. Below is the content available on this topic. To view the old article click here.

Content Elements

Content Elements are the elements of a page tree that contain the actual text content of a page.

A content element can contain plain text, HTML, JavaScript code, and a variety of markup dialects (see below). In addition to static text, a content element can also contain one or more Template Expressions to create dynamic content.

Supported MIME Types

A content element can be configured to display one of the following MIME types. Structr will format and escape the output text according to the contentType attribute.

  • Plaintext
  • HTML
  • CSS
  • JavaScript

Additionally, Structr supports the following markup dialects out of the box.

  • Markdown
  • Textile
  • Mediawiki
  • Tracwiki
  • Confluence
  • Asciidoc

The MIME type of a content element can be configured with the Content-Type menu in the content editor. If the MIME type of a content element is set to one of the markup dialects, Structr will use the appropriate renderer to create HTML output from the content of the element.

Content Editor

Advanced Usage

One of the outstanding abilities of Structr is the combination of static and dynamic content in a single HTML element. The below snippet for example creates a (client-side) JavaScript block that uses a database query to fill a String. The resulting string can be used in client-side JavaScript code without the need to fetch additional data from the database.

<script language="JavaScript">
    var users = '${join(project.users, ',')}';
    var list  = users.split(',');
    list.forEach(function(userName) {
        /* .... */
    });
</script>

Search results for "Content Elements"

Template Elements

As defined in the DOM specification, Content Elements must not have child nodes. To be able to mix template expressions and node structures, Structr provides a block-version of Content Elements, the so-called Template Elements (Template icon). Similar to Content Elements, Template Elements support different content types and allow for template expressions. However, in contrast to Content Elements, Template Elements can have children.

Page Title

The page’s title currently contains a so-called content element. Content elements are nodes in the page tree with static text, HTML or script expressions. In the case of the <title> tag, the content element is used to display the title of the page.

Content Types

This content type must be set on template elements or content elements that are included using the built-in include() function, and on so-called Main Page Templates that use ${render(<a data-id="3230f1d81eb345c199024b82eb7c56f2" class="mention">children</a>)}.

Template Elements

Therefore, the rendering flow stops at template elements and does not render the remaining branch of the DOM tree. Instead, the template element has to explicitly invoke the rendering process for it’s child elements in the appropriate place. To accomplish this, Structr provides the children keyword and the render() function, as shown in the example below. While this makes the configuration of template elements a bit more subtle than that of content elements, it provides much more flexibility.

Active Elements

The Active Elements flyout shows the list of active elements in the current page, i.e. all elements that have dynamic behaviour, like Repeaters, elements with show conditions or hide conditions, and the corresponding content elements that output dynamic content.

Templates

Other than content elements, template elements can have child elements in the DOM tree which makes them very flexible. There are two special template expressions that help organizing the content rendering hierarchy: render() and include_child().

Content Elements

The DOM #text nodes are called Content Elements in Structr. They contain the actual text content of elements. The text in such an element can be displayed differently depending on the content type set. In addition to plain text and HTML, different dialects of markup languages such as Markdown, Textile and other Wiki formats are supported, which allow automatic formatting of annotated text.

Content Types

Structr supports various different content types in Content Elements. Setting the content type of an element to a value other then text/plain causes the element to behave differently.