Sometimes you just need to embed something quickly in SilverStripe CMS's rich text content (depending on what you are trying to do a shortcode might be a better option!). By default SilverStripe makes a valiant effort to ensure content in this field in the CMS is cleaned up and does not contain any nasties that might break your page or even worse, allow chunks of javascript to be pasted and executed where they shouldn't be (they are better off being dealt with via the Requirements functionality - javascript is not content!).
Certain tags are stripped out when saving in the rich text field, this can pose a problem in some cases. For example embedding a video in the rich text editor that has markup containing VideoObject schema meta data to help search engines better index videos content.
To demonstrate the point, let's try to embed the SilverStripe 3 video (from our handy SilverStripe Vimeo knowledge-base - worth checking out the SilverStripe talks here - shameless plug!) using the below markup including some extra meta data. You can test out whether the meta data is valid using Google’s Structured Data Testing Tool.
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<h2><span itemprop="name">SilverStripe 3 is here</span></h2>
<meta itemprop="duration" content="T3M07S"/>
<meta itemprop="thumbnail" content="silverstripe-thumb.jpg" />
<object width="500" height="281">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=44848958" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=44848958" type="application/x-shockwave-flash"
allowfullscreen="true" allowscriptaccess="always" width="500" height="281"></embed>
</object>
<span itemprop="description">SilverStripe CEO and Founder Sam Minnée and CTO Hamish Friedlander talk about
what's new in the SilverStripe CMS and Framework 3 and why it's a good tool for developer, designer and content
editors.
</span>
</div>
Pasting this into the rich text edit leaves me with only the skeleton of the former VideoObject schema markup but retained the video object… not ideal. *sad face*
To remedy this, here is a quick tip for configuring the rich text editor to enable VideoObject schema tags in your CMS (I'm sure you can find many other uses for this technique too!).
TinyMCE (the wysiwyg editor) configuration in SilverStripe is handled via the HtmlEditorConfig class. Configuration is set by modifying the _config.php file in your projects "mysite" folder (as per the golden rule, we don't touch the SilverStripe core or modules!).
Adding the following to my config file you can extend the editor to allow extra tags relating to the VideoObject schema. A small piece of code, opening up lots of options for customising the rich text editor.
HtmlEditorConfig::get('cms')->setOption(
'extended_valid_elements',
'div[itemprop|itemscope|itemtype],' .
'span[itemprop]' .
'meta[itemprop|content]'
);
Note the setOption method contains a string enabling new markup tags and additionally new attributes on those tags, example "meta[itemprop|content]” enables the <meta> tags and allows attributes “itemprop” and “content" in SilverStripe's rich text editor. Now I can add my VideoObject meta data such as:
<meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
The rest of the string adds attributes to existing allowed markup (div, span) we need to allow my video to be pasted into the rich text edit and retain it’s meta data goodness.
I’m sure you can come up with many other applications for this handy tip, there is further information about customising the rich text editor in the SilverStripe documentation.
Happy embedding and meta data-ing :)
