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.

Example 1: We want our customers to contact us by phone, but the phone number changes all the time.

RTE content:

Please call us: phonenumber

In TypoScript:

page {
  stdWrap.parseFunc.short {
    phonenumber =  + 1 555-3141
  }
}

In the frontend ‘phonenumber’ will now be replaced with the actual number. Quite easy. Combined with TypoScript conditions, this is a really powerful way of content rendering.

Example 2: We want customers to call a different phone number during business hours.

RTE content:

Please call us: phonenumber

In TypoScript:

[hour =< 9] && [hour =>18]
page {
  stdWrap.parseFunc.short {
    phonenumber =  + 1 555-3141
  }
}
[else]
page {
  stdWrap.parseFunc.short {
    phonenumber =  + 1 555-5131
  }
}
[end]

Read more for the solution!

How to set the click and enlarge option for the RTE in tt_news:

Step 1:
Include the static template: Clickenlarge Rendering (rtehtmlarea)

Now the click and enlarge rendering should work for normal content elements, but still no result for tt_news.

Step 2:
Add the following TypoScript to your setup:

# Rendering RTE tt_news. Use the normal RTE parseFunc
# configuration for tt_news rte content
plugin.tt_news {
        general_stdWrap {
   	      parseFunc < tt_content.text.20.parseFunc
        }
}

Your Done

It turns out tt_news uses another way of rendering the RTE, so this should be reversed.

Update: It seems this snippet is actually part of the tt_news static template but out-commented... makes me wonder why?

For your convenience:

## Enable upload field
options.uploadFieldsInTopOfEB = 1  

## Enable folder create
options.createFoldersInEB = 1 

Check out the screenshot:

#-----------------------------------
# RTE Configuration
#-----------------------------------

RTE.default {

    ## Custom client CSS for same behavoir in BE and FE
    # contentCSS = fileadmin/.....

    hideTableOperationsInToolbar = 1
    buttons.toggleborders.keepInToolbar = 1
    showButtons (
	bold, italic, underline,
	left, center, right, justifyfull,
	orderedlist, unorderedlist,
	line, link, image,
	table, findreplace, chMode,
	copy, cut, paste, undo, redo, toggleborders,
	tableproperties, rowproperties, rowinsertabove,
	rowinsertunder, rowdelete, rowsplit,
	columninsertbefore, columninsertafter,
	columndelete, columnsplit, cellproperties,
	cellinsertbefore, cellinsertafter,
	celldelete, cellsplit, cellmerge
    )
    toolbarOrder (
	bold, italic, underline,
	left, center, right, justifyfull,
	orderedlist, unorderedlist,
	line, link, image,
	table, findreplace, chMode,
	copy, cut, paste, undo, redo, toggleborders,
	tableproperties, rowproperties, rowinsertabove,
	rowinsertunder, rowdelete, rowsplit,
	columninsertbefore, columninsertafter,
	columndelete, columnsplit, cellproperties,
	cellinsertbefore, cellinsertafter,
	celldelete, cellsplit, cellmerge
   )

   proc {
	## CSS Styled Content is used.
	overruleMode = ts_css

	## Do not convert br to p
	dontConvBRtoParagraph = 1

	## Remap div to p
	remapParagraphTag = p

	## Tag which are allowed outside the p and div
	allowTagsOutside = hr, address

	## TAGS ALLOWED
	## Added to the default internal list: b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,span
	## But, for the sake of clarity, we use a complete list in alphabetic order.
	## center, font, strike, sdfield and  u will be removed on entry (see below).
	## b and i will be remapped on exit (see below).
	## Note that the link accessibility feature of htmlArea RTE does insert img tags.
	allowTags (
		a, abbr, acronym, address, blockquote, b, br, caption, cite, code, div, em,
		h1, h2, h3, h4, h5, h6, hr, i, img, li, link, ol, p, pre, q, sdfield,
		span, strong, sub, sup, table, tbody, td, th, tr, tt, ul
	)

	## TAGS DENIED
	## Make sure we can set rules on any tag listed in allowTags.
	denyTags >

	## ALLOWED P & DIV ATTRIBUTES
	## Attributes class and align are always preserved
	## Align attribute will be unset on entry (see below)
	## This is a list of additional attributes to keep
	keepPDIVattribs = xml:lang

	## CONTENT TO DATABASE
	entryHTMLparser_db = 1
	entryHTMLparser_db {
		## TAGS ALLOWED
		## Always use the same list of allowed tags.
		allowTags < RTE.default.proc.allowTags

		## TAGS DENIED
		## Make sure we can set rules on any tag listed in allowTags.
		denyTags >

		## AVOID CONTENT BEING HSC'ed TWICE
		htmlSpecialChars = 0

		tags {
			## REMOVE IMG TAGS
			# img.allowedAttribs = 0
			# img.rmTagIfNoAttrib = 1

			## REMOVE SPAN TAGS
			span.allowedAttribs = 0
			span.rmTagIfNoAttrib = 1

			## CLEAN ATTRIBUTES ON THE FOLLOWING TAGS
			## Span fixAttrib unnessesary since not allowed.
			#span.fixAttrib.style.unset = 1
			p.fixAttrib.align.unset = 1
			div.fixAttrib.align.unset = 1
			hr.allowedAttribs = class
			b.allowedAttribs = xml:lang
			blockquote.allowedAttribs = xml:lang
			cite.allowedAttribs = xml:lang
			em.allowedAttribs = xml:lang
			i.allowedAttribs = xml:lang
			q.allowedAttribs = xml:lang
			strong.allowedAttribs = xml:lang
			sub.allowedAttribs = xml:lang
			sup.allowedAttribs = xml:lang
			tt.allowedAttribs = xml:lang
		}

		## REMOVE OPEN OFFICE META DATA TAGS AND DEPRECATED HTML TAGS
		## We use this rule instead of the denyTags rule so that we can
		## protect custom tags without protecting these unwanted tags.
		removeTags = center, font, o:p, sdfield, strike, u

		## PROTECT CUSTOM TAGS
		keepNonMatchedTags = protect
	}

	HTMLparser_db {
		## STRIP ALL ATTRIBUTES FROM THESE TAGS
		## If this list of tags is not set, it will default to: b,i,u,br,center,hr,sub,sup,strong,em,li,ul,ol,blockquote,strike.
		## However, we want to keep xml:lang attribute on most tags and tags from the default list where cleaned on entry.
		noAttrib = br

		## XHTML COMPLIANCE
		## Note that applying xhtml_cleaning on exit would break non-standard attributes of typolink tags
		xhtml_cleaning = 1
	}

	exitHTMLparser_db = 1
	exitHTMLparser_db {
		## REMAP B AND I TAGS
		## b and i tags are used by Mozilla/Firefox in editing mode.
		## This must be done on exit because the default HTMLparser_db parsing executes the reverse mapping.
		tags.b.remap = strong
		tags.i.remap = em

		## KEEP ALL TAGS
		## Unwanted tags were removed on entry.
		## Without this rule, the parser will remove all tags! Presumably, this rule will be more efficient than repeating the allowTags rule
		keepNonMatchedTags = 1

		## AVOID CONTENT BEING HSC'ed TWICE
		htmlSpecialChars = 0
	}
   }
}

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

## RTE processing rules for bodytext column of tt_content table
## Erase settings from other extensions
RTE.config.tt_content.bodytext >

## Make sure we use ts_css transformation
RTE.config.tt_content.bodytext.proc.overruleMode = ts_css
RTE.config.tt_content.bodytext.types.text.proc.overruleMode = ts_css
RTE.config.tt_content.bodytext.types.textpic.proc.overruleMode = ts_css

TCEFORM.tt_content.bodytext.RTEfullScreenWidth = 100%