TYPO3 v15 dev-main snapshot ()

2026-08-10 22:31:24 +02:00
commit aad9daaefd
1506 changed files with 94005 additions and 0 deletions
@@ -0,0 +1,97 @@
+..  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