[Frage] Formulare in extbase und Fluid

  • Typo3Noob4Ever Typo3Noob...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    21. 04. 2021, 22:44

    Hi,

    ich habe das Problem, dass wenn ich ein Formular in der HTML-Template-Datei in einem Plugin auf extbase/fluid-Basis erstellen möchte, Formularelemente escaped werden. Aus <input> wird dann &lt;input&gt;. Für form-tags gilt das gleiche.

    Wie hängt das zusammen und wie kann man Formular-Tags zulassen?

    Ich möchte das Formulartool hierzu nicht nutzen, da ich nur ein einziges input-Tag ohne Buttons oder Serverseitige Verarbeitung benötige.

    Gibt es hierzu eine Lösung?


  • 1
  • 0 x
    3198 Beiträge
    151 Hilfreiche Beiträge
    26. 04. 2021, 09:07

    Kannst Du mal etwas von Deinem Template zeigen?

    Normalerweise sollte das gehen. Es gibt aber einige Viewhelper, die ihren Inhalt escapen. Daher ist die Frage, ob Du evtl. da was ungünstig verschachtelt hast.

  • Typo3Noob4Ever Typo3Noob...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    01. 05. 2021, 03:22

    Hallo Julian,

    danke, dass du auf meine Frage reagiert hast :-)

    [code]{namespace ns=Ns\Homepage\ViewHelpers}
    <div class="plugin-news">

    <ul>
    <f:for each="{items}" as="item">

    <li class="news-item">

    <div class="picture">
    <f:image src="{item.picture}" alt="{item.title}" treatIdAsReference="TRUE" width="413c" height="413c" />
    </div>
    <div class="content">
    <div class="title">{item.title}</div>
    <div class="date"><ns:Nicedate integer="{item.date}" format="F j, Y"/></div>
    <div class="text-content">{item.bodytext}</div>
    <div class="learn-more">Learn More</div>
    </div>

    </li>

    </f:for>
    </ul>


    <form>
    <input id="test"/>
    <select id="test2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    </select>
    <textarea id="test3">
    Test
    </textarea>
    </form>

    &gt;button&lt;Show More&gt;/button&lt;
    &lt;button&gt;Show More&lt;/button&gt;
    <button>Show More</button>

    <f:format.htmlentitiesDecode>
    &gt;button&lt;Show More&gt;/button&lt;
    &lt;button&gt;Show More&lt;/button&gt;
    <button>Show More</button>
    </f:format.htmlentitiesDecode>

    </div>
    [/code]

    Das Problem tritt bei Formular-Tags auf, also <form>, <input>, <textarea>, <select> und bei <button>. Andere Elemente wie <div>, <img> oder <ul> sind kein Problem. Auch wenn ich das Form-Modul verwende um Formulare zu generieren stoße ich auf das gleiche Problem.

    Ich behelfe mir zurzeit damit, dass ich diese Tags mit Javascript im Frontend mit regulären Ausdrücken in richtiges HTML umwandle, aber das ist ja mit Sicherheit nicht im Sinne des Erfinders.

    htmlentitiesDecode hilft mir auch nicht. Sobald ein Formular-Tag serverseitig ausgegeben werden soll werden Formular-Elemente wieder Text umgewandelt.

    &gt;button&lt; wird in der Frontendausgabe mit htmlentitiesDecode immer zu >button<
    &lt;button&gt; wird in der Frontendausgabe mit htmlentitiesDecode immer zu &lt;button&gt;

    [code]<!--TYPO3SEARCH_begin-->
    <div id="c32" class="frame frame-default frame-type-list frame-layout-0">
    <div class="plugin-news">
    <ul>
    <li class="news-item"><div class="picture"><img alt="Test1" src="/fileadmin/_processed_/a/5/csm_dinosaur_4e81e276f7.jpg" width="413" height="413" /></div><div class="content"><div class="title">Test1</div><div class="date">April 6, 2021</div><div class="text-content">Test</div><div class="learn-more">Learn More</div></div>
    </li>
    </ul>

    &lt;form&gt;&lt;input id=&quot;test&quot;/&gt;&lt;select id=&quot;test2&quot;&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;/select&gt;&lt;textarea id=&quot;test3&quot;&gt;
    Test
    &lt;/textarea&gt;&lt;/form&gt;

    &gt;button&lt;Show More&gt;/button&lt;
    &lt;button&gt;Show More&lt;/button&gt;
    &lt;button&gt;Show More&lt;/button&gt;


    &gt;button&lt;Show More&gt;/button&lt;
    &lt;button&gt;Show More&lt;/button&gt;&lt;button&gt;Show More&lt;/button&gt;</div></div>

    <!--TYPO3SEARCH_end-->
    [/code]

    Das das eine input-Feld im angehängten Bild dargestellt wird, hängt mit meinem Javascript-Regex zusammen. Ohne JS sieht das genauso aus wie die anderen Elemente

  • Typo3Noob4Ever Typo3Noob...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    01. 05. 2021, 03:32

    Hier ist noch das Typoscript über welches, dass Formular an Fluid gegeben wird:

    [code]lib.BodyContent = COA
    lib.BodyContent {
    /*
    10 = TEXT
    10.field = title
    10.wrap = <h1>|</h1>
    */

    20 = CONTENT
    20 {
    table = tt_content
    select {
    orderBy = sorting
    }
    }
    30 = CONTENT
    30 {
    table = pages
    select {
    orderBy = sorting
    }
    renderObj = COA
    renderObj {
    /*
    10 = TEXT
    10.field = title
    10.wrap = <h2>|</h2>
    */

    20 = CONTENT
    20 {
    table = tt_content
    select {
    pidInList.field = uid
    orderBy = sorting
    }

    wrap = <div class="subsite">|</div>
    }
    }

    /*
    wrap = <!--TYPO3SEARCH_begin-->|<!--TYPO3SEARCH_end-->
    */
    }
    }[/code]

  • Typo3Noob4Ever Typo3Noob...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    01. 05. 2021, 03:35

    Und hier die Fluid-Konfiguration:

    [code]page = PAGE
    page {
    10 = FLUIDTEMPLATE
    10 {
    templateRootPaths.0 = typo3conf/ext/homepage/Resources/Private/Templates/
    layoutRootPaths.0 = typo3conf/ext/homepage/Resources/Private/Layouts/
    partialRootPaths.0 = typo3conf/ext/homepage/Resources/Private/Partials/

    file.stdWrap.cObject = CASE
    file.stdWrap.cObject {
    key.data = levelfield:-1, backend_layout_next_level, slide
    key.override.field = backend_layout
    default = TEXT
    default.value = typo3conf/ext/homepage/Resources/Private/Layouts/subsite.html
    1 = TEXT
    1.value = typo3conf/ext/homepage/Resources/Private/Layouts/subsite.html
    }
    variables {
    navigation < lib.Navigation
    projectnavigation < lib.ProjectNavigation
    footernavigation < lib.FooterNavigation
    headercontent < lib.HeaderContent
    beforecontent < lib.BeforeContent
    bodycontent < lib.BodyContent
    footercontent < lib.FooterContent
    }
    }
    }[/code]

  • Typo3Noob4Ever Typo3Noob...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    01. 05. 2021, 03:40

    Im Layout wird die Fluid-Variable wie folgt ausgegeben:

    [code]<main>
    <f:format.html parseFuncTSPath="lib.parseFunc">{bodycontent}</f:format.html>
    </main>[/code]

  • 0 x
    3198 Beiträge
    151 Hilfreiche Beiträge
    09. 05. 2021, 14:20

    Huch... Hatte den Thread etwas aus den Augen verloren... :-/

    Ursache dürfte Dein Layout sein. Dort schiebst Du allen gerenderten Inhalt durch lib.parseFunc. Diese hat eine Liste erlaubter Tags (lib.parseFunc.allowTags) - alle anderen Tags werden entwertet/escapet.

    Die Übernahme von TypoScript in Templates funktioniert auf zwei Arten ganz gut:
    1. Mittels <f:cObject typoscriptObjectPath="lib.(...)"/> direkt im Fluidtemplate aufrufen
    2. Als variable ans Fluidtemplate übergeben, aber dort als rohes HTML zu behandeln (https://docs.typo3.org/other/typo3/view-helper-reference/10.4/en-us/typo3fluid/fluid/latest/Format/Raw.html).

  • 1