Adding a YouTube Button to FCKeditor in Drupal

Posted by Jeffrey Scott of TypeHost | Monday, October 27th, 2008
, ,

This is a reference article for adding a YouTube button for automatic video uploads in Drupal with FCKeditor. Basically, there are a few small issues that I ran into when setting up the plugin, but the process is simple and quick. If you want to give embedded video support through the WYSIWYG editor, without having your users cut and paste the embed code through the source directly, then this method may be of interest.

1. Install and configure FCKeditor in your Drupal installation.

2. Download the YouTube Plugin for FCKeditor at:
http://sourceforge.net/projects/youtubepluginfo/

3. First Change – the documentation for the plugin says to upload it into the:
fckeditor/editor/plugins folder

Disregard this and upload it into the upper level folder of the Drupal FCKeditor module. The path should be:

sites/all/modules/fckeditor/plugins/youtube

4. Download and open the fckeditor.config.js file from the main module folder.

5. Add the following code to the end of the file, at the very bottom line:

FCKConfig.Plugins.Add( 'youtube', 'en,ja' ) ;

6. Add the YouTube button to your FCKeditor configuration, i.e. if you are using “Drupal Full,” “Drupal Basic,” “DrupalFiltered,” or whatever, change the fckeditor.config.js file to add the button like this:

BEFORE:
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash']
]

AFTER:
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash','YouTube']
]

7. Save and upload the modified fckeditor.config.js file to the site.

8. If you test the module out now (clearing the cache & refreshing the JavaScript), the button will display, and a pop up will load – it is a single screen that says “YouTube Property” and has a single text field for pasting the embed code from YouTube.

The problem – after pasting the code, and clicking “ok” – the window just stalls, it does not submit and it does not close.

9. Fix for this – in the “youtube” folder of the plugin, there is a HTML file named “youtube.html”. In the header, you will find the code:

<head>
<title>YouTube Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script src="../../dialog/common/fck_dialog_common.js" type="text/javascript"></script>
<script src="youtube.js" type="text/javascript"></script>
<link href="../../dialog/common/fck_dialog_common.css" type="text/css" rel="stylesheet">
</head>

For whatever reason, the file structure is incorrect here, so I entered the full path to the files on the server. Example:

<head>
<title>YouTube Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script src="http://www.example.com/sites/all/modules/fckeditor/fckeditor/editor/dialog/common/fck_dialog_common.js" type="text/javascript"></script>
<script src="youtube.js" type="text/javascript"></script>
<link href="http://www.example.com/sites/all/modules/fckeditor/fckeditor/editor/dialog/common/fck_dialog_common.css" type="text/css" rel="stylesheet">
</head>

10. Now – return to any page where the FCKeditor is enabled, and test the “YouTube Button” – it works perfectly.

References:

YouTube Plugin: http://sourceforge.net/projects/youtubepluginfo/
FCKeditor: http://www.fckeditor.net/
FCKeditor Module for Drupal: http://drupal.org/project/fckeditor

Note:

If you have the time, you can also vote on the question: “Should FCKeditor change its name?” at the fckeditor.net website.

http://www.fckeditor.net/poll

According to the site – 58% of the people surveyed said that the name should be changed, for whatever reason.

Related Posts