CodeGarden 10: The sixth annual Umbraco Developer Conference
June 23-25th 2010 - free ASP.NET MVC pre-conference. Register today!

Add YouTube Button to TinyMCE

Attention: This guide only applied to Umbraco v3 (using TinyMCE v2). The YouTube plug-in for TinyMCE does not work with version 3 (which is supplied with Umbraco v4). If you require the ability to embed YouTube videos in Umbraco v4, then you will need to enable the 'Flash/media' button in the rich-text editor data-type.

The TinyMCE YouTube plug-in allows you to easily insert YouTube video clips into your rich-text editor area.

Firstly, you need to download the YouTube plug-in from here: http://bit.ly/f2RxY

Here is how you can integrate this in Umbraco:

1. Extract the contents of the youtube.zip archive to your /umbraco_client/tinymce/plugins/youtube/

2. In your /config/ folder, open the tinyMceConfig.config file.

3. Insert the following lines:

After the last <command /> entry, add...

 

<command>
	<umbracoAlias>mceYoutube</umbracoAlias>
	<icon>../umbraco_client/tinymce/plugins/youtube/images/youtube.gif</icon>
	<tinyMceCommand value="" userInterface="true" frontendCommand="youtube">youtube</tinyMceCommand>
	<priority>75</priority>
</command>

Then after the last <plugin /> entry, add...

<plugin loadOnFrontend="false">youtube</plugin>

 

4. Once the XML config entries are in place, you will need to restart the  Umbraco application - the quickest way of doing this is by modifying your Web.config, (literally open it, add a space, remove it, hit save).

5. The YouTube button is now available in Umbraco. However, it's not quite ready yet, there is still one more step!

6. In your Umbraco back-end, go to the "Developer" section, expand the "DataTypes" folder and then select "Richtext editor". In the "Buttons" section you should see a YouTube icon. Check the box next to the icon, and you're done! If you don't see the YouTube icon, then check that the did the config steps above, and/or check that the read permissions are set correctly on your /umbraco_client/ folder, (re-apply them if needs be).