How to make a youtube button work successfully in tinymce editor?
I have read many posts on "How to insert youtube videos via youtube button in tinymce editor in custom php sites?" But unfortunately none is found self explanatory.Newbies find it extremely difficult to understand if the tutorial is not explained in detail.So I thought writing something on this topic may help the newbies.So you may ask me "Whats the use of keeping new wine in the old bottle?" My answer is "I am keeping refined wine in the old bottle so that when you drink it contributes to your health:)". Now lets concentrate on the step-by-step tutorial. In some places I have explained with the help of pics for your better understanding.I assume all of you are aware of the use and implementation of tinymce editor in your custom php sites. Lets begin...
1. First you have to install plugins for youtube videos to make your youtube button work in tinymce.It has been tested in tinymce 3.4.x.
Download youtube.zip (4.39 KB) and extract the zip to your local hard drive.
2. Copy "youtube" folder to TinyMCE plugins folder (e.g. tinymce/jscripts/tiny_mce/plugins).Add "youtube" plugin and "youtube" button to your tinymce configuration code.(to illustrate i can show how i have used it below)
<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,
advhr,advimage,emotions,iespell,inlinepopups,insertdatetime,preview,
media,searchreplace,print,contextmenu,paste,directionality,
fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,
template,youtube,wordcount",
// Theme options
// Theme options
theme_advanced_buttons1 : "spellchecker,fullscreen,|,undo,redo,| ,bold,italic,underline,|,cut,copy,paste,pastetext,pasteword,|
,bullist,numlist,|,sub,sup,|,link,unlink,|,image,youtube,|
,cleanup,code,pagebreak",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
width: "100%",
height: "400",
// Skin options
skin : "o2k7",
skin_variant : "silver",
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
3. if everything is setup correctly and if you click on the new youtube button you'll get "Insert/edit youtube video" dialog box as seen in the following screenshot:
4. In the above dialog box you can provide code of youtube video (e.g.XFLbHn9UVSY) or full video url (http://www.youtube.com/watch?v=XFLbHn9UVSY )and then click "Insert" button:
The above action of yours will lead you to the following:
Now I know the next question you will ask me "Why screenshot image of chosen youtube video is being displayed instead of actual youtube videos?" The reason is most browsers do not display youtube videos in design mode, so the way out is to provide screenshot images of videos in design mode and replace those images with code for embedding youtube videos on the server side.Here is a simple approach for this.
if I assume the name of the textarea used in your program code is as follows:
<textarea id="elm1" name="content" style="width:100%"></textarea>
then you have to use the following php code to replace images with code for embedding you tube videos on the server side as follows:
function replacelink($text) {
$replace = '<iframe title="$2" class="youtube-player" type="text/html" width="576" height="400" <iframe title="$2" class="youtube-player" type="text/html" width="576" height="400" src="http://www.youtube.com/embed/$2" frameborder="0"></iframe>';
$find = '/(<img.*?alt="([\da-z_]+)".*?>)/i';
return preg_replace($find, $replace, $text);
}
//replace content with name of your textarea used in your code
$content_new = escapeQuotes(stripslashes($_POST['content']));
$content_new=replacelink($content_new);
Here you can see the preview screenshot with youtube start video button inside the youtube video:)
<![CDATA[// <![CDATA[ // <![CDATA[ tinyMCE.init({ // General options mode : "textareas", theme : "advanced", plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,youtube,wordcount", // Theme options // Theme options theme_advanced_buttons1 : "spellchecker,fullscreen,|,undo,redo,| ,bold,italic,underline,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,sub,sup,|,link,unlink,|,image,youtube,|,cleanup,code,pagebreak", /*theme_advanced_buttons1 : "spellchecker,fullscreen, | ,undo,redo,| ,bold,italic,underline, ,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,sub,sup,|,link,unlink,|,image,youtube,|,cleanup,code",*/ theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, width: "100%", height: "400", // Skin options skin : "o2k7", skin_variant : "silver", // Example content CSS (should be your site CSS) content_css : "css/example.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "js/template_list.js", external_link_list_url : "js/link_list.js", external_image_list_url : "js/image_list.js", media_external_list_url : "js/media_list.js", // Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } }); // ]]]]]]><![CDATA[><![CDATA[> // ]]]]><![CDATA[>]]>
germansingergirl
turnnoffyourmind
yousharknotpass
dededos
jacobvanloon
baratheonpilled
areudirty
