TYPO3 extension visual_editor

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

Editing.Made.Visual.mp4

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

Where to add the ViewHelpers

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 container element that holds 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/