Docs Developer Site
Developer Docs CMS reference docs next Rich text

Rich text

Contents

Rich text is stored as author-edited HTML.

Editor

You may configure a rich text field in your schema using the HtmlArea form item. This provides a WYSIWYG editor in Content Studio, and stores the content as HTML with Enonic-specific markup for internal references. See the HtmlArea documentation for details on configuration and output.

Markup

The editor support common HTML elements out-of-the-box, such as <p>, <h1>-<h6>, <ul>, <ol>, <pre>, <code>, <table> etc. In addition, it supports special handling of some elements which are stored as HTML but require customization in the front-end. These are:

Raw format

Rich text is stored as HTML with Enonic-specific handling in some cases: Example of raw stored HTML:

<h3>Welcome</h3>
<p>Read our <a href="content://f3076b5c-ea45-4c8b-8c06-1f87b8d8cdd9">latest post</a>.</p>
<figure><img src="image://a1b2c3d4-e5f6-7890-abcd-ef1234567890" /></figure>
[embed]<iframe src="https://www.youtube.com/embed/cFfxuWUgcvI" allowfullscreen></iframe>[/embed]

Processed output

Visit the React SPA tutorial for hands-on examples of client-side rendering.

Guillotine exposes HtmlArea fields as RichText. The processedHtml field contains placeholders for internal links, images and macros, tagged with data-*-ref attributes. The front-end must rewrite these using the structured links, images and macros data before rendering. The optional processHtml argument controls image sizes; it does not select an absolute or server-relative URL.

{
  guillotine(project: "myproject", branch: "master") {
    get(key: "/articles/hello") {
      ... on com_example_myapp_Article {
        data {
          body {
            raw
            processedHtml
            links {
              ref
              pageUrl { baseUrl path queryString }
              fragment
            }
          }
        }
      }
    }
  }
}
Response
{
  "data": {
    "guillotine": {
      "get": {
        "data": {
          "body": {
            "raw": "<p>Read our <a href=\"content://f3076b5c-...\">latest post</a>.</p>",
            "processedHtml": "<p>Read our <a href=\"/articles/latest-post\" data-link-ref=\"e72f48b6-...\">latest post</a>.</p>",
            "links": [
              {
                "ref": "e72f48b6-...",
                "pageUrl": {
                  "baseUrl": null,
                  "path": "/articles/latest-post",
                  "queryString": ""
                },
                "fragment": ""
              }
            ]
          }
        }
      }
    }
  }
}

Beyond raw and processedHtml, the HtmlArea type also exposes the special elements as typed fields — images, links and macros — each carrying a ref that matches its data-*-ref attribute in processedHtml, so a front-end can match placeholders to their rendering data. Each element’s page shows the corresponding response. For full field definitions and rendering examples, see Guillotine rich text.

Front-end integration

Rendering processed rich text in a front-end framework — mapping content URLs to routes, swapping image references for responsive <picture> tags, and rendering macros as components — is non-trivial to do by hand. See Front-end integration for the toolkits Enonic provides.

Contents

Contents