Allow Youtube and Custom HTML Tags in TYPO3 RTE

11

Youtube in TYPO3 Frontend

Selecting Edit Page Properties

Edit Page TSConfig

Edit TypoScript Template Setup

Youtube in RTE Source

Youtube in RTE WYSIWYG

By: Michael Cannon

Submitting your vote...

Rating: 4.8 of 5. 5 vote(s).
Click the rating bar to rate this item.

Social media is an important part of today's website user experience. By default though, TYPO3's RTE doesn't easily allow for including video. After a good bit of testing, Acqal offers the two tips to get videos into your RTE and showing on your website.

Add the following snippet to your root level page and storage folder Page TSConfig. These lines basically say "let these additional HTML be accepted for proper display in the TYPO3 backend."

RTE.default.proc {
  # Allow embed (Youtube) HTML tags in the RTE 
  allowTags := addToList(object,param,embed) 
  allowTagsOutside := addToList(object,embed)
  entryHTMLparser_db.allowTags < RTE.default.proc.allowTags
}

In your website root TypoScript template setup block, add the following snippet. This line tells the front-end RTE processor to  display the additional HTML as intended.

# Allow embed (Youtube) HTML tags in the RTE
lib.parseFunc_RTE.allowTags := addToList(object,param,embed)

By keeping the above method for allowing Youtube videos into the RTE, you can apply the similar principal for custom HTML tags. Either replace the object and other tags above with your custom code or append ",customtag, customtag1, customtagN" to the allowTags or allowTagsOutside addlist to list functions.

An Explanation From TYPO3 Core TS

• Value modifications: The ":=" operator assigns a value to an object path by calling a predefined function which modifies the existing value of the current object path in different ways.
• The portion after the “:=”-operator and to the end of the line is split in two parts: A function and a value. The function is specified right next to the operator (trimmed) and holding the value in brackets (not trimmed).
• Function addToList: Adds a comma-separated list of values to the end of a string value. There is no check for duplicate values, and the list is not sorted in any way.

Reference

• TYPO3 TS Core reference