Ultimately Missing Feature - TYPO3 Frontend Editing

As you can see in the TYPO3 survey, TYPO3 people ignore “TYPO3 Frontend Editing”. I’m not sure why!!

Nowadays, the most popular CMS has built-in excellent “Frontend Editing” features as below.

• WordPress Gutenberg/VisualComposer
• Wix
• Squarespace

Install “feedit” extension with or without composer. Activate from Admin Tools > Extensions > Activate “Frontend Editing” extension.

You will need to enable the frontend admin panel with one of the following options.

// Option 1. TypoScript Show admin panel
config.admPanel = 1
config.admPanel.enable.all = 1

// Option 2. User TSconfig to disable the admin panel for a user:
admPanel.hide = 1

Step 3. Set Edit Option at Admin Panel

Go to your frontend site, Click on “Settings” at the bottom admin panel. Enable display edit icons and panels, and don’t forget to click on the “Update Settings” button to save it ;)

Step 4. Include Static Template (feedit)

Go to TYPO3 Backend > Template > Root page > Include Static Template “Frontend Editing (feedit).

Step 5. Live Frontend Editing

Now you should be able to see “Frontend Editing” icons to each content element on your frontend site.

Step 6. Experience Editing

Test-drive by clicking on the “edit icon” at a particular TYPO3 content element, and It will open “backend form” so you can easily edit/delete the content element.

“TYPO3 Frontend Editing a Website Has Never Been Easier. What-You-See-is-What-You-Get Editing for Every TYPO3 User.”
- Pixelant (TYPO3 agency that initiates frontend_editing extension).

Crowdfunding History

At the time of TYPO3 v8, the TYPO3 community collected € 65,000 to develop the remarkable “Frontend Inline Editing” feature.

TYPO3 Version Compatibility

The good thing is that Team frontend editing proudly supports all major TYPO3 versions v8, v9, v10.

Anyway, get ready to see some practical stuff for extension frontend_editing!

Step 1. Installation of EXT:frontend_editing

Install “frontend_editing” extension with or without composer. Activate from Admin Tools > Extensions > Activate “Frontend Editing” extension.

Installation with Composer
composer require friendsoftypo3/frontend-editing

Step 2. Include Static Template

Go to TYPO3 Backend > Template > Root page > Include Static Template “Frontend Editing (frontend_editing).

Step 3. Enable Frontend Editing

You can enable or disable frontend editing with one of the below options.

// Option 1. Enable with TypoScript
config.frontend_editing = 1

// Option 2. Enable with User TSconfig
setup.override.tx_frontend_editing_enable = 1

Step 4. Enable User-Wise Frontend Editing

You can also enable/disable the frontend editing feature for each TYPO3 backend user. Login with your account, Go to User Settings from the top panel.

Tips

• If your TYPO3 site running on sub-folder, then consider to configure baseURL plugin.tx_frontendediting.baseUrl = /
• If you are using TYPO3 v9, then make sure to include “Editable Fluid Styled Content v9”.

Step 5. First-Impression of Cool TYPO3 Frontend Editing

Woohoo! Just go to your frontend TYPO3 site, you will be able to see awesome TYPO3 frontend editing panels. Open and play around the top, left, and right-side frontend editing tools.

Step 6. Live TYPO3 Frontend Inline Editing

Experience the live TYPO3 frontend editing, at least it will work well for TYPO3 core default element ;)