98 lines
3.0 KiB
ReStructuredText
98 lines
3.0 KiB
ReStructuredText
.. include:: /Includes.rst.txt
|
|
|
|
|
|
.. _apireference-formeditor:
|
|
.. _apireference-formeditor-basicjavascriptconcepts:
|
|
.. _apireference-formeditor-basicjavascriptconcepts-events:
|
|
.. _apireference-formeditor-stage:
|
|
|
|
===========
|
|
Form Editor
|
|
===========
|
|
|
|
This chapter is the developer reference for the TYPO3 backend form editor.
|
|
It covers the JavaScript extension points and the data model used by the
|
|
editor's TypeScript modules.
|
|
|
|
.. contents::
|
|
:depth: 1
|
|
:local:
|
|
|
|
.. _apireference-formeditor-architecture:
|
|
|
|
Architecture overview
|
|
=====================
|
|
|
|
The form editor consists of four cooperating TypeScript modules, each
|
|
responsible for one UI component:
|
|
|
|
.. list-table::
|
|
:header-rows: 1
|
|
:widths: 30 35 35
|
|
|
|
* - Module (import path)
|
|
- Component
|
|
- Responsibility
|
|
* - :js:`@typo3/form/backend/form-editor/view-model`
|
|
- —
|
|
- Central view model; wires DOM events and publishes/subscribes
|
|
to all cross-component events.
|
|
* - :js:`@typo3/form/backend/form-editor/stage-component`
|
|
- **Stage**
|
|
- Renders the abstract and preview views of the current form page.
|
|
* - :js:`@typo3/form/backend/form-editor/inspector-component`
|
|
- **Inspector**
|
|
- Renders the property editors for the selected form element.
|
|
* - :js:`@typo3/form/backend/form-editor/tree-component-adapter`
|
|
- **Structure tree**
|
|
- Wraps the TYPO3 backend tree web component and bridges its
|
|
events to the publish/subscribe bus.
|
|
* - :js:`@typo3/form/backend/form-editor/mediator`
|
|
- —
|
|
- Wires all publish/subscribe events to view-model actions.
|
|
Loaded automatically; replace via
|
|
:yaml:`dynamicJavaScriptModules.mediator` only when you need to
|
|
completely swap the event-wiring logic.
|
|
|
|
All modules communicate exclusively via a **publish/subscribe bus**
|
|
(:js:`PublisherSubscriber`). Direct module-to-module calls are avoided
|
|
so that extension code can hook into any point without modifying core
|
|
files.
|
|
|
|
.. _apireference-formeditor-custom-modules:
|
|
|
|
Registering a custom JavaScript module
|
|
=======================================
|
|
|
|
Custom modules must export a :js:`bootstrap` function. The form editor
|
|
calls this function once all built-in modules have loaded, passing the
|
|
central :js:`FormEditor` application object as the sole argument.
|
|
|
|
.. rst-class:: bignums-xxl
|
|
|
|
1. Create the JavaScript module
|
|
|
|
.. literalinclude:: _codesnippets/_bootstrap.js
|
|
:language: javascript
|
|
:caption: EXT:my_extension/Resources/Public/JavaScript/backend/form-editor/view-model.js
|
|
|
|
2. Register the module in the importmap
|
|
|
|
.. literalinclude:: _codesnippets/_JavaScriptModules.php
|
|
:language: php
|
|
:caption: EXT:my_extension/Configuration/JavaScriptModules.php
|
|
|
|
3. Tell the form editor to load the module
|
|
|
|
.. literalinclude:: _codesnippets/_prototype-setup.yaml
|
|
:language: yaml
|
|
:caption: EXT:my_extension/Configuration/Form/MyFormSet/config.yaml
|
|
|
|
|
|
.. toctree::
|
|
:maxdepth: 1
|
|
|
|
JavaScriptEvents/Index
|
|
StageTemplates/Index
|
|
FormElementModel/Index
|