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 <input>. 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?
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.
Hallo Julian,
danke, dass du auf meine Frage reagiert hast :-)
{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>
>button<Show More>/button<
<button>Show More</button>
<button>Show More</button>
<f:format.htmlentitiesDecode>
>button<Show More>/button<
<button>Show More</button>
<button>Show More</button>
</f:format.htmlentitiesDecode>
</div>
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.
>button< wird in der Frontendausgabe mit htmlentitiesDecode immer zu >button<
<button> wird in der Frontendausgabe mit htmlentitiesDecode immer zu <button>
<!--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>
<form><input id="test"/><select id="test2"><option>1</option><option>2</option><option>3</option></select><textarea id="test3">
Test
</textarea></form>
>button<Show More>/button<
<button>Show More</button>
<button>Show More</button>
>button<Show More>/button<
<button>Show More</button><button>Show More</button></div></div>
<!--TYPO3SEARCH_end-->
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
Hier ist noch das Typoscript über welches, dass Formular an Fluid gegeben wird:
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-->
*/
}
}
Und hier die Fluid-Konfiguration:
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
}
}
}
Im Layout wird die Fluid-Variable wie folgt ausgegeben:
<main>
<f:format.html parseFuncTSPath="lib.parseFunc">{bodycontent}</f:format.html>
</main>
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).