TinyMCE 4/5/6 plugin Youtube (V3 API) search and insert

Thank you for purchasing the TinyMCE 4/5/6 plugin Youtube search and insert. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

General Markup

Drag and drop the youtube folder into the folder tinymce/plugins

Now add 'youtube' to the plugins: and toolbar:

Done !

If you want to use this into a cms you can change the insert like you want. I made 2 examples. One the normal iframe and two a image placeholder (see demo) so that after saving the document you can simple do a replace.

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
language : "en",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste youtube"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image youtube"
});
</script>

<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>

Click on the button

In this example I use the embedded iframe !

( Default is iframe insert or choose a image placeholder )

Output

If you want to change the output open tinymce/plugins/youtube/js/youtube.js

You will find on line 14

You can also change some Youtube search parameters like 'orderby' or 'maxResults'

You also can set it to an image placeholder and convert it on the server side. See 'Make your own markup' how to change and the demo.

Get your API V3 key here

//Set output to 'iframe' or 'placeholder'
var youtput = 'iframe';
//Set to http or https
var secure = 'https';
//Max results per request
var max = 30;
//Api key 3 version (https://console.developers.google.com/project)
var key = 'here the API key V3';
//use Slider or inputfields
var slider = true;
//Set order
//date : Resources are sorted in reverse chronological order based on the date they were created.
//rating : Resources are sorted from highest to lowest rating.
//relevance : Resources are sorted based on their relevance to the search query. This is the default value for this parameter.
//title : Resources are sorted alphabetically by title.
//viewCount : Resources are sorted from highest to lowest number of views.
var order = 'relevance';
//Use suggest search words
var suggest = true;



//The normal html inserted into tinyMCE is an iframe. See markup how to change.
var sHTML = '<iframe title="' + $('#titleURL').val() + '" width="' + $('#widthURL').val() + '" height="' + $('#heightURL').val() + '" src="' + sEmbedUrl + '?wmode=opaque&theme=' + $('#skinURL').val() + '" frameborder="0" allowfullscreen></iframe>';

Make your own markup

You will find after line 135

Here you see the markup if you select the image placeholder.

Change to whatever you want

Example ubb insert

Remember you have to change this for yourself

var sHTML = '<img src="' + secure + '://img.youtube.com/vi/' + getVideoId($('#inpURL').val()) + '/0.jpg" alt="' + $('#titleURL').val() + '" width="' + $('#widthURL').val() + '" height="' + $('#heightURL').val() + '" data-video="youtube" data-skin="' + $('#skinURL').val() + '" data-id="' + getVideoId($('#inpURL').val()) + '">';

//Example UBB
[youtube]' + getVideoId($('#inpURL').val()) + '[/youtube]

Language's

Open tinymce/plugins/youtube/langs/en.js. Here you find a few words which you can change into your own language and save it to the same name as you use for the lang set in the TinyMCE init.

Example : if set language : "de", then make a lang file called tinymce/plugins/youtube/langs/de.js
If the lang file is missing in the tinymce/plugins/youtube/langs/ TinyMCE it will load the english version!.
Also open tinymce/plugins/youtube/plugin.min.js and add the language here tinymce.PluginManager.requireLangPack('youtube', 'en,nl,de');

I've used the following files as listed.

JavaScript

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this app. No guarantees, but I'll do my best to assist.

Ceasar

TinyMCE 4/5/6 plugin Youtube (V3 API) search and insert

Markup Markup customization and highlights

General Markup

Demo

Output

Make your own markup

Example ubb insert

Customization

Credits Files

JavaScript