README

Next Generation Frontend Editing for TYPO3 CMS.

This extension provides visual editing features for content elements in TYPO3 CMS.

Features

• ✍️ Inline editing it looks perfectly like the frontend output (WYSIWYG)
• 🧲 Drag-and-drop repositioning of content elements (➕ adding and 🗑️ deleting elements)
• ⚡ Real-time preview of changes without page reloads
• 😊 User-friendly interface for non-technical editors
• ♿ Accessibility-aware editing controls for TYPO3 editors

Compatibility

Installation

1. 📦 composer require friendsoftypo3/visual-editor (or install via 🧩 Extension Manager)
2. 🧱 Add f:render.text, f:mark.contentArea to your templates (see below)
3. 🧹 Clear caches
4. 🚀 Start editing!

Useful links:

• Try the Demo Try the editor without any setup.
• ddev local demo setup test it locally
• fluid_styled_content addon automatic text editing for fluid_styled_content
• Example Commit How to integrate f:render.text
• Example Commit How to integrate f:render.contentArea
• Slack Channel ask questions

For editors

• 🔗 Opening editable links: when editable text is inside a link, left click starts editing the text. To open the link instead, use the middle mouse button or Ctrl/Cmd + click.
• 💾 Saving changes: use the save button. Autosave is available only when enabled, and the UI says to switch to a workspace if autosave is disabled.
• 🔦 Finding editable areas: use Spotlight to highlight editable text, rich text, images, and content elements.
• 👻 Showing empty fields: use "show empty" when editable but currently empty fields are hard to see.
• 🌐 Multi language edits: available with TYPO3 v14. Use the "Multi language" view to compare translations side by side, edit visible fields in each preview, and save pending changes together.
• ↔️ Moving content: drag content elements by their handle. Hold Ctrl while dropping to copy instead of moving.
• ✍️ Editing special text characters: type ­ for a soft hyphen and   for a non-breaking space. Entity-like text that starts with &, such as  , is shown with & while editing so it stays literal text.

Template Integration

visual_editor uses ViewHelpers in Fluid templates to mark the areas that should be editable. In TYPO3 v14, the extension uses existing ViewHelpers in TYPO3 Core to hook into the rendering. This means that the extension works out-of-the-box for the new theme "Camino" and also for the default fluid_styled_content templates.

If you want to add visual editing to your own templates, you need to add some ViewHelpers to all locations that should be editable:

Text/RichText Fields

Replace the output of your texts with the f:render.text ViewHelper.

• record is already a Record object:

before:
<f:if condition="{record.header}">
  <h1>{record.header}</h1>
</f:if>

after:
<f:variable name="header" value="{record -> f:render.text(field: 'header')}" />
<f:if condition="{header}">
  <h1>{header}</h1>
</f:if>

before:
<h1>{record.header}</h1>

after:
<h1>{record -> f:render.text(field: 'header')}</h1>

If you do not have a Record object yet, you can create one with the record-transformation DataProcessors:

// add record dataProcessor for all content elements
lib.contentElement.dataProcessing.1768551979 = record-transformation

Editable text entities

For plain editable text fields, Visual Editor makes some otherwise hard-to-see characters explicit while the field is focused. Soft hyphens are shown as ­, and non-breaking spaces are shown as  . Plain ampersands stay visible as &, but ampersands that start an entity-like sequence, such as  ,  , or  , are shown as & while editing so the sequence stays literal text. When the editor changes or leaves the field, these values are converted back before validation and storage.

<h1>{record -> f:render.text(field: 'header')}</h1>

Fluid components

When you use Fluid components, render the editable text outside the component and pass the rendered value into the component. This keeps the component decoupled from records and TCA fields, and lets callers pass either a plain string or the result of f:render.text.

<my:component.card header="{record -> f:render.text(field: 'header')}" />

Inside the component, accept the argument as a string or stringable value:

<f:argument name="header" type="string|Stringable" />

ContentArea

ViewHelper f:render.contentArea (v14)

This newly introduced ViewHelper (v14) is the recommended way to render content areas in the TYPO3 in general.

Short description what you need to change in your templates:

before:
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '3'}"/>

after:
<f:render.contentArea contentArea="{content.main}" />

content.main here is automatically filled if you use PAGEVIEW and a BackendLayout with a column with an Identifier named main.

More information in the Official Documentation.

If you can not use the f:render.contentArea ViewHelper, you can also use the f:mark.contentArea ViewHelper.

ViewHelper f:mark.contentArea (v13)

Use f:render.contentArea if possible!

Add the f:mark.contentArea ViewHelper to the Fluid template that renders your content elements.

search for:

• f:cObject (typoscript rendering):

  before:
  <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '3'}"/>
  
  after:
  <f:mark.contentArea colPos="3">
    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '3'}"/>
  </f:mark.contentArea>

• each="{children_ (EXT:container):

  before:
  <f:for each="{children_201}" as="element">
    {element.renderedContent -> f:format.raw()}
  </f:for>
  
  after:
  <f:mark.contentArea colPos="201" txContainerParent="{record.uid}">
    <f:for each="{children_201}" as="element">
      {element.renderedContent -> f:format.raw()}
    </f:for>
  </f:mark.contentArea>

• v:content.render (EXT:vhs):

  before:
  <v:content.render column="0"/>
  
  after:
  <f:mark.contentArea colPos="0">
    <v:content.render column="0"/>
  </f:mark.contentArea>

• flux:content.render (EXT:flux):

  before:
  <flux:content.render area="column0"/>
  
  after:
  <f:mark.contentArea colPos="{data.uid}00">
    <flux:content.render area="column0"/>
  </f:mark.contentArea>

Known limitations

• Wrapped content elements rendered with f:render.contentArea and recordAs are not currently supported for drag-and-drop. In this setup, drag handles may disappear. Move the wrapping markup into the content element rendering instead of wrapping elements at the contentArea level.
• Headless and non-Fluid setups are not first-class integration targets. Visual Editor relies heavily on Fluid ViewHelpers that wrap output in web components and load the required JavaScript, so robust headless integration would need a public API.
• Cross-domain headless setups are further limited because backend-module frame messaging does not work reliably across domains due to TYPO3 core limitations. General multi-domain setups are effectively excluded for this approach.

Multi Site/Domain Setup

You need to be Logged in to every Domain separately to use the Visual Editor.

OR you can use EXT:multisite_belogin it automatically logs you in to all sites/domains.

Rich Text Styling

Visual Editor uses your regular frontend CSS for the editing view. CSS that is configured only in the TYPO3 RTE configuration (contentsCss) is not applied there.

If your project defines custom rich-text styles, add the relevant rules to your frontend CSS so the page output and the editor share the same styling. Projects with custom lib.parseFunc_RTE setups may also need matching frontend rules.

Accessibility

Visual Editor is designed with WCAG 2.2 AA as a goal, but this is not a full compliance claim for every TYPO3 project.

The editor interface includes accessible labels, keyboard-focusable controls, validation announcements, and semantic roles. It has been tested with axe DevTools and NVDA.

Final accessibility depends on the project templates, CSS, semantic HTML, and editor-authored content. Drag-and-drop workflows are pointer-oriented, so projects should verify alternative workflows for their editor needs. Project-level accessibility should be checked in the integrated TYPO3 site.

License and Authors: License type, contributors, contact information

This extension is licensed under the GPL-2.0-or-later license.

with ♥️ from

If something did not work 😮
or you appreciate this Extension 🥰 let us know.

We are always looking for great people to join our team!
https://www.andersundsehr.com/karriere/