Search code examples
iframetypo3typoscriptrte

TYPO3 How can I wrap an iframe (RTE) with TypoScript?


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 iframefrom 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>
}

Solution

  • Security side-note

    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.

    TypoScript adjustments

    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>
        }
    }
    

    Generated output

    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">  &lt;main&gt;Not parsed...&lt;/main&gt;</p>
    

    Find more details in the parseFuncTypoScript reference