Adding a YouTube Button to FCKeditor in Drupal
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.
According to the site – 58% of the people surveyed said that the name should be changed, for whatever reason.
Related Posts:
44 Responses to “Adding a YouTube Button to FCKeditor in Drupal”
Leave a Reply
Pings/Trackbacks
-
[...] Adding a YouTube Button to FCKeditor in Drupal (tags: drupal plugin fckeditor video youtube) [...]
-
[...] Adding a YouTube Button to FCKeditor in Drupal (tags: drupal video plugin youtube fckeditor) [...]
-
[...] an insert YouTube Button to FCKEditor. Share/Save :CMS, [...]
Recommended by Web Dev News
Thanks!
I wasn’t sure why it was stalling.
Thanks for the stall fix!! great stuff!!!
Hi, I have quite the same problem with the Flash button, it doesn't allows me to upload flash (swf, flv) files (i already checked in config.php and fck.config.js the allowed extension) and if i upload it via FTP it doesn't load the video as well.
Any idea?
Please help me thanks.
I tried this, and it worked for me! I'm using Drupal v6.6, FCKeditor module v1.2.2.2, FCKeditor v2.6.2, youtube plugin 1.1.0
I'm using this as the relative path to the js and css files
../../fckeditor/editor/dialog/common/fck_dialog_common.js
I like it more than the full URL.
Thanks!
@ Pietro – check the documentation for FCKeditor – essentially you have to add a line of code to the config.php file at:
sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php
Then modify the settings.php in your sites/default folder to set the cookie to the site domain.
make sure the users have file browser upload permissions.
make sure upload is enabled in FCKeditor settings panel
There shouldn't be any trouble then with Flash file uploads.
thanks a lot,good one for all
Thanks – this was a huge help. But I've got one more problem. I can't make any changes to the page after the video is embedded. Changes are not saved when I click "Save". I'm using Drupal 6.9 and the latest FCKeditor version.
Thank you!
Hi there, I try to install youtube plugin yesterday night, I fixed the stall with this great guide, but I still have a problem…..my youtube video doesn't work. I see only a square with a great "f" like a flash plugin….I use drupal 5.15 fckeditor 2.6
thanks in advance to who can help me….
Thanks for that snippet of code, it is now working.
relative path would be, and ofcourse file structure is wrong, as its intended for FCKeditor itself not its implementation in drupal.
../../fckeditor/editor/dialog/common/fck_dialog_common.js
also dont forget to go to HTML filter and add <embed> to it, as if u dont nothing will appear :-)
Actually this help me a lot. You can also use http://onlineconverter.info to convert youtube videos into mp4 files
Thanks,
onlineconverter.info
Thanks, helped me a bunch!
One thing I noticed, is that YouTube videos embedded via the button, can’t be viewed in full screen in drupal.
To correct that, edit youtube.js in drupal’s sites/all/modules/fckeditor/plugins/youtube directory.
Add the following text (around line 85):
SetAttribute( e, ‘allowfullscreen’ , ‘true’ ) ;
So that this text block:
SetAttribute( e, ‘type’ , ‘application/x-shockwave-flash’ ) ;
SetAttribute( e, ‘pluginspage’ , ‘http://www.macromedia.com/go/getflashplayer’ ) ;
Looks like this:
SetAttribute( e, ‘type’ , ‘application/x-shockwave-flash’ ) ;
SetAttribute( e, ‘pluginspage’ , ‘http://www.macromedia.com/go/getflashplayer’ ) ;
SetAttribute( e, ‘allowfullscreen’ , ‘true’ ) ;
It works on Drupal 6.10, Fckeditor plugin 6.x-2.0-beta1, Fckeditor v. 2.6.4 and YouTube Plugin for FCKeditor version number 1.1.0.1
I’m trying to get this to work using FCKEditor with WYSIWYG API but am not having any luck so far. I made the described changes to fckeditorconfig.js but when I go to admin/settings/wysiwyg to add the YouTube button, there is still not YouTube button for me to check. I tried emptying cache and refreshing but that didn’t help. Is there something else I have to do to tell WYSIWYG API that the YouTube button should be there now?
@Christopher – take a look at step #6 – you have to add the button manually to the fckeditor.config.js file
Thank you so much for this great fix!!!!!!!!!!!
Great data and tips. Thanks alot.
It was very helpful tip.
facebook
Thank you, makes my day ;)
@Deep,@Adam – Guys thanks for pointing out the correct relative path here. I use the YouTube button & FCK editor in nearly every site, so it is important. But one point not mentioned in the original article – the relative path is necessary for any kind of multi-site installation. Otherwise the multi-site may work, but pull from the other domain – not good. So I can confirm:
../../fckeditor/editor/dialog/common/fck_dialog_common.js
../../fckeditor/editor/dialog/common/fck_dialog_common.css
—> best choice, works 100%
Additional Note: I just discovered a tricky bug with scroll & fckeditor in chrome… fixed by editing /sites/all/modules/fckeditor/fckeditor/editor/fckeditor.html
—> xEditingArea to “height: 390px” or whatever works for your height values.
tenks good article dude :D
thanks, this has saved me sometime :)
fenerbahçe taraftar sitesi, tenks admin
fenerbahcenin 12. gücü
sweet, thanks.
when I input the url some text , it will cut off 2 characters , such as if I put “abcde” , then the source code will show “http://www.youtube.com/v/cde&hl=en&fs=1&rel=0″ ,can any one help me about this ,as well the filed name “URL” is very confusing, because actually it is a ID of the video ,am i wrong?
FYI, this appears to be broken in fckeditor 6.x-2.0-beta1
I don’t have time to look at it, but it basically never loads, the dialog pops up and then the spinner goes forever.
very good plugin, i am only asking how to make it similar to youtube code that include also …. or pherhaps it the same?
The proper way to add scripts or links to fckeditor is as follows
var oEditor = window.parent.InnerDialogLoaded() ;
var FCK = oEditor.FCK ;
var FCKLang = oEditor.FCKLang ;
var FCKConfig = oEditor.FCKConfig ;
var FCKRegexLib = oEditor.FCKRegexLib ;
var FCKTools = oEditor.FCKTools ;
document.write( ” ) ;
document.write( ” ) ;
I am also trying to get this to work with the drupal wysiwyg module + fckeditor. Since the directory structure isn’t the same I’m not sure I’m placing stuff correctly or updating the correct files. Here’s what I’ve done…
1) Copied youtube folder to: /public_html/sites/all/libraries/fckeditor/editor/plugins/youtube
Note: I also placed a copy here just in case: /public_html/sites/all/modules/wysiwyg/plugins/youtube
2) Updated fckeditor.config.js
Added the line: FCKConfig.Plugins.Add( ‘youtube’, ‘en,ja’ ) ;
at the end of the file located at: /public_html/sites/all/modules/wysiwyg/editors/js
3) Updated fckconfig.js
added: FCKConfig.ToolbarSets["Default"] (to add ‘YouTube’)
to file at: /public_html/sites/all/libraries/fckeditor
Note: fckeditor.config.js (from my step #2) didn’t have the FCKConfig.Plugins.Add line.
I tried just doing the above to see if I could get the button to display. No luck.
Any ideas?
Thanks 10.000 :D for this article.
good info add the youtube button
This is a very good article, but there is a much easier way…
When in the FCKeditor, click on the “html” tab and then in the upper left hand corner you will see “Source”. Click the source and then paste in your Youtube code. Voila!
Then click “Source” again and it will make it into Flash which you can move around, center, etc… should you need to adjust the code just go back to “Source”.
Using the above method, I get an error in my browser “Unknown toolbar item “YouTube”
Well, I sorted out my rookie mistake above, but I still cannot get this to work with ie8. I hit the ok button and nothing happens. It works perfectly in firefox.
can u tell me how solve “Unknown toolbar item “YouTube” problem, pls! It gives me trouble :(
Hello,
I have try to add youtube link in drupal wysiwyg with fckedior library but it is not showing me I have followed all the instruction in youtube plugin file please help me
Thanks! This is what I need! I wonder if there is WYSIWYG which is capable in uploading video.
fantastic tutorial! really elped me out. Thanks!!