Legen Sie die Datei
"RopiFrontendEditingExtensions/src/Resources/views/content-editor/hello/definition.html.twig"
dem Beispiel entsprechend an.
Das neue Inhaltselement wird über ein neues "ropi-content-element"-Tag registriert.
Das type-Attribut muss dem Schema "{BundleName}/{ElementName}" entsprechen.
Über das Attribut "icon" kann ein beliebiges
Material Icon
für das Inhaltselement definiert werden.
Das "color"-Attribut legt fest, in welcher Farbe das Icon und die Hilfslinien im Frontend Editor dargestellt werden soll.
Der Wert für das Attribut "group" ist frei wählbar und definiert unter welcher Gruppe das neue Inhaltselement im Frontend Editor gelistet werden soll.
Mit dem Attribut "name" wird der sprechende Name des Inhaltselements festgelegt.
Im Attribut "languagespecificsettings" kann eine kommaseparierte Liste von Konfigurationensschlüsseln hinterlegt werden, welche sprachabhängig sind. Diese Einstellungen würden bei einem Import mit der Option "Sprachspezifische Daten behalten" nicht überschrieben werden. Im Beispiel haben wir diese auf "greeting" gesetzt.
Für das Attribut "src" sollte immer "{{ path('ropi.frontend-editing.element.render') }}" verwendet werden. Das Attribut definiert, welche URL vom Frontend Editor zum Rendern des Inhaltselements aufgerufen wird.
Innerhalb des "ropi-content-element"-Tags muss sich ein "template"-Tag als Kindknoten befinden. Dieses kann mit beliebigem HTML befüllt werden, welches definiert, wie das Konfigurationsmenü für das Inhaltselement aussehen soll. Wichtig ist hierbei, wie bei gewöhnlichen HTML-Formularen auch, dass bei allen Eingabefeldern das Attribut "name" gesetzt und definiert ist. Denn über den darüber definierten Bezeichner, greifen Sie im Template auf die Werte zu. Im Beispielcode hat das "name"-Attribut von unserem "Greetings"-Texteingabefeld den Wert "greeting" und somit kann im Template des Inhaltselements über die Variable "data.configuration.greeting" auf den konfigurierten Wert zugegriffen werden.
Wie Sie sehen, werden im Beispielcode einige Custom-Tags verwendet, welche Ihnen die Arbeit erleichtern. Sie können natürlich aber auch gewöhnliche HTML-Elemente verwenden. Wenn Sie jedoch komplexe HTML-Elemente benötigen, welche JavaScript verwenden, sollten Sie diese als Web Components einbinden. Um mehr über Web Components zu erfahren, klicken Sie
hier .