TinyMCE 4 plugin Youtube (V3 API) search and insert

A drag and drop plugin for the new tinyMCE 4 WYSIWYG editor.
Build with Bootstrap

Search for youtube video's, autocomplete suggestions, see a preview and insert into the tinyMCE 4 WYSIWYG editor

You can select some params like width, height, dark or light version

DEMO

Item Support

BUY NOW ! for $ 6

Thank you for purchasing the TinyMCE 4 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 image placeholder !

( Default is iframe insert )


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;
//Set default width and height
var width = 560;
var height = 315;


//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!.

I've used the following files as listed.

JavaScript

  1. jQuery
  2. jQuery.jQTubeUtil.js
  3. Bootstrap
  4. Mustache
  5. Modernizr
  6. bootstrap slider

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