I'm using TYPO3 7.6 with fluid styled content
and I've allowed my editor to insert an iframe
into the Rich Text Editor (RTE or htmlarea). The iframe
is shown, because of this Snippet. That's fine.
Now I want to wrap this iframe
with typoscript
, because the iframe must be responsive, so I need sth. like that, as a wrapper:
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%; /* ratio 16x9 */
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How can I wrap the iframe
from TYPO3-RTE with some HTML-Code?
I've tried sth. like this ... but it doesn't work.
### wrap iframe at RTE
lib.parseFunc_RTE {
externalBlocks := addToList(iframe)
externalBlocks {
iframe.stripNL = 1
iframe.callRecursive = 1
iframe.callRecursive.tagStdWrap.HTMLparser = 1
iframe.callRecursive.tagStdWrap.HTMLparser.tags.iframe {
fixAttrib.class.default = classOfiframe
wrap = <div>|</div>
}
}
}
or
lib.parseFunc_RTE.tags.iframe = TEXT
lib.parseFunc_RTE.tags.iframe {
wrap = <div class="test">|</div>
}
Allowing your editors to hand-craft HTML raises the chance that your website is compromised by XSS (cross-site-scripting). It's not suggested to allow direct HTML input, especially if you cannot fully trust your editors.
You're TypoScript was almost fine, only the levels where you applied the properties were wrong.
The following example puts the question in a whole picture. The part in the beginning is basically solved by fetching content elements - in this regard it initializes the state to be parsed. Only the lib.parseFunce_RTE
adjustments are required in your scenario.
# Simulating some content
page = PAGE
page.10 = TEXT
page.10.value (
<p>Before</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
<p>After</p>
<main>Not parsed...</main>
)
page.10.parseFunc =< lib.parseFunc_RTE
# Adjusting parsing instructions for IFRAMES
lib.parseFunc_RTE {
allowedTags := addToList(iframe)
externalBlocks := addToList(iframe)
externalBlocks {
iframe.stripNL = 1
iframe.stdWrap.wrap = <div class="frame-wrapper">|</div>
}
}
This produces the following output - it's expected that the <main>
tag is encoded, because it's not defined to be handled. A nonTypoTagStdWrap.HTMLparser
statement is responsible for this encoding of non-matched tags.
<p class="bodytext">Before</p>
<div class="frame-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
</div>
<p class="bodytext">After</p>
<p class="bodytext"> <main>Not parsed...</main></p>
Find more details in the parseFunc
TypoScript reference