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

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:

• ddev 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

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

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>

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.

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/