TYPO3: RTE embed / iframe tag

Posted on April 28, 2011Maarten14 Comments »

According to Google Analytics a lot of people are currently looking for a way to use embed tags within the (tt_news) RTE. By default the TYPO3 RTE will remove these embed tags, but it’s fairly easy to change this. In this tutorial I’ll show you how to insert an iframe, within the TYPO3 RTE.


Embedding a Vimeo video

Vimeo uses an iframe:

<iframe src="http://player.vimeo.com/video/16458561?title=0&amp;byline=0&amp;portrait=0" frameborder="0" height="225" width="400"></iframe>

The most obvious way would be: Switch to HTML modus in the RTE, paste the code and save the content element. But as you might have experienced, this way you’ll end up with a nice HTML embed code printed in the frontend. Not so useful…

How to fix this?!
Since Vimeo uses an iframe, we need to make sure the RTE accepts this iframe-tag. So we need to change RTE behaviour when saving the content element or tt_news record. Insert the following TSConfig configuration into the Page TSConfig field:

RTE.default.proc.allowTags := addToList(iframe)
RTE.default.proc.entryHTMLparser_db.allowTags := addToList(iframe)

If you want to insert the iframe outside of a block tag like a P or a DIV, than you’ll need to following as well:

RTE.default.proc.allowTagsOutside := addToList(iframe)

Now the RTE will preserve the iframe when saving. But… still no iframe in the frontend! :(
The extension css_styled_content doesn’t render an iframe by default, so let’s change this:

In your TypoScript constants add the iframe to the following (default) code:

styles.content.links {
  allowTags  (
         b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,
         em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,
         h5,h6,address,iframe
  )
}

Take a look in the frontend :) If everything went well you can now see the Vimeo videoplayer.

RTE, Snippets, TSConfig, , ,

Bookmark and Share

14 Comments »

 
  • Sacha says:
    April 29, 2011 at 12:03

    Many thanks, I have been looking for this for some time. The last part with css_styled_content did the trick.

  • wiebke says:
    June 3, 2011 at 15:19

    Hey folks,

    Thanks a lot for that entry! You rock.

  • JF says:
    June 15, 2011 at 20:10

    I’m new with TYPO3, and i tried to insert de code but the last code make tt_news unable to mange all the tags, it write it like simple text:
    styles.content.links {
    allowTags (
    b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,
    em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,
    h5,h6,address,iframe
    )
    }
    Where do i put this code in my main template?

    I tried to change styles.content (default), but i thins it’ not possible.
    Thank you for your help.

  • Maarten says:
    June 15, 2011 at 20:23

    @JF: I’ve send you an email…

  • Typo Newbie says:
    June 23, 2011 at 22:25

    where does one edit the TypoScript constants?

  • Maarten says:
    June 24, 2011 at 11:39

    In your TypoScript template, right above the setup field.

  • Sam says:
    June 27, 2011 at 16:25

    Hi Maarten,

    in my case it’s not working. The iframe shows up as “text” at FE.
    My TS-Config is:
    RTE.default.proc.allowTags := addToList(iframe)
    RTE.default.proc.entryHTMLparser_db.allowTags := addToList(iframe)
    RTE.default.proc.allowTagsOutside := addToList(iframe)

    And the Styles.Content i also changed.

    Do you habe a clue?

    Thanks!

  • Maarten says:
    June 27, 2011 at 17:05

    Hi Sam,

    Please add the following at the bottom of your TS-Config:

    ## Use same RTE processing rules in FE
    RTE.default.FE < RTE.default

    Might work, but I haven’t tested it yet.

  • Rafal says:
    July 30, 2011 at 14:08

    Can you provide full config for RTE? I trying to make iframe work but without success.

  • dkor says:
    August 15, 2011 at 07:45

    I had problems using this setup in an extension. This entry in my setup helped:

    lib.parseFunc_RTE.allowTags:=addToList(iframe)

  • Max says:
    November 16, 2011 at 23:37

    Hi there i followed your exact steps and tried it out a dozen times but I cannot get it to work. In the backend the RTE shows the iFrame, in the frontend however i see the text <iframe…
    I am inserting content via the tt_news module..
    Any Ideas on what I am doing wrong?

  • Max says:
    November 16, 2011 at 23:45

    Ok my bad. After trying a couple of times i realized that your code from above:
    styles.content.links {
    allowTags (
    b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,
    em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,
    h5,h6,address,iframe
    )
    }

    should be all in one line and without spaces in between because otherwise it doesn’t work! Like this:

    styles.content.links.allowTags = b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,h5,h6,address,iframe

    Hope I helped somebody!
    Thanks!
    Cheers!

  • derhecht says:
    November 25, 2011 at 21:27

    Thx. Since your the first page who really helps in a cleary and working way (Typo3 4.5)!

  • openairhoster says:
    November 26, 2011 at 22:19

    Thanks for the post, Maarten. And yes, Max, you helped me with your comment, too.

 

Drop a comment