---
title: "ViewHelpers"
manual: "RTE CKEditor Image"
version: "main"
permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:api-viewhelpers@main"
source: "API/ViewHelpers.rst"
rendered: "2026-10-01T01:27:51+00:00"
---

# ViewHelpers {#api-viewhelpers}

Fluid ViewHelpers for rendering RTE image previews in backend templates.

**Table of contents**

-   [RteImagePreviewViewHelper](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:rteimagepreviewviewhelper@main)

## RteImagePreviewViewHelper {#api-rteimagepreviewviewhelper}

-   **class RteImagePreviewViewHelper**

    -   *Fully qualified name:* `\Netresearch\RteCKEditorImage\ViewHelpers\RteImagePreviewViewHelper`

    Renders a backend preview of RTE HTML content by stripping disallowed tags
    and truncating text while preserving HTML structure.

    This ViewHelper replicates the preview logic from
    `RteImagePreviewRenderer` for use in Content Blocks and other custom
    backend preview templates where the built-in renderer is not available.

    <!-- TODO: no Markdown rendering for "versionadded" -->

### Arguments {#arguments}

-   **html**

    -   *Type:* string
    -   *Required:* true

    The RTE HTML content to preview. Typically `{data.bodytext}` in a
    Content Blocks backend preview template.

-   **maxLength**

    -   *Type:* int
    -   *Default:* 1500

    Maximum number of text characters before truncation. When exceeded, the
    text is truncated with an ellipsis (`...`).
    HTML tags do not count toward this limit.

-   **allowedTags**

    -   *Type:* string
    -   *Default:* `<img><p>`

    HTML tags to preserve in the preview output, in `strip_tags()` format.
    All other tags are stripped (their text content is kept).

### Processing Pipeline {#processing-pipeline}

The ViewHelper processes HTML through three stages:

1.  **Sanitization** — Removes control characters (`\x00`-`\x1F`),
    UTF-16 surrogates, and Unicode non-characters, replacing them with
    U+FFFD (replacement character).
1.  **Tag stripping** — Calls `strip_tags()` with the `allowedTags`
    argument, keeping only `<img>` and `<p>` by default.
1.  **DOM-aware truncation** — Parses the remaining HTML with
    `DOMDocument`, walks the DOM tree counting text length, and
    truncates at `maxLength` while keeping all tags properly closed.

### Usage with Content Blocks {#usage-with-content-blocks}

Content Blocks is the official TYPO3-endorsed successor to Mask/DCE/Flux for
creating custom content element types. Content Blocks registers its own backend
preview templates (`backend-preview.html`), which do not use the
built-in `RteImagePreviewRenderer`.

To render RTE image previews in a Content Block, use this ViewHelper in the
block's backend preview template:

**ContentBlocks/ContentElements/my-block/templates/backend-preview.html**

```html
<html xmlns:nr="http://typo3.org/ns/Netresearch/RteCKEditorImage/ViewHelpers"
      data-namespace-typo3-fluid="true">
<nr:rteImagePreview html="{data.bodytext}" />
</html>
```

### Custom Tag Allowlist {#custom-tag-allowlist}

To also preserve `<figure>` and `<figcaption>` in the preview:

```html
<nr:rteImagePreview html="{data.bodytext}"
                    allowedTags="<img><p><figure><figcaption>" />
```

### Custom Truncation Length {#custom-truncation-length}

To show a shorter preview (e.g., in a compact list view):

```html
<nr:rteImagePreview html="{data.bodytext}" maxLength="300" />
```

### Standard Content Elements {#standard-content-elements}

For standard `tt_content` types with RTE bodytext, you do **not** need this
ViewHelper. The built-in `RteImagePreviewRenderer` handles backend
previews automatically via TYPO3's `PreviewRendererInterface`.