[Solved] Toolbar button for inserting YouTube videos

[Jim Parton]

The functionality of the inserthtml is inconsistent.

I have attached a sample project which demonstrate this issue.
I have a custom action which inserts a html object (a youtube clip) into the editor.

On all three browsers, the html is inserted but there in consistency between the browsers:
on firefox the video placeholder is not shown and you cannot tell if it has worked or not.
On IE you get a black box (which is an acceptable compromise) showing you where the video will be.
On chrome works fine and you get a picture of the video.

I am using jquery 1.6.1 but this issue is also present when i use jquery 1.5.1.

Can we get firefox to behave like IE for Firefox (quite rare for something not to work in firefox but work in the other browsers).
Below is the code that inserts the html

	// Setup the command.
	function RadEditor_YouTube(e) {
		var evt = $.Event(e);
		evt.stopPropagation();
		evt.preventDefault();
 
		var editor = $(this).parents('table').data('tEditor');
		var url = window.prompt("Please enter the address of the YouTube clip:", "");
		if ((url != null) && (url.length > 0)) {
			var xhtml = CreateYouTubeXhtml(url);
			if (xhtml == null) {
				window.alert("\"" + url + "\" is not a valid YouTube address.");
			}
			else {
				editor.focus();
				editor.exec('insertHtml', { value: xhtml });
			}
		}
	}
 
	// Function to turn a URL into a blob of XHTML for an embedded clip.
	function CreateYouTubeXhtml(url) {
		// Regex to pull out the identifier from the URL.
		var linkRegex = new RegExp("v=([^&]+)", "i");
		var match = linkRegex.exec(url);
		if (match == null) {
			return null;
		}
 
		return "<object width=\"425\" height=\"344\">" +
				   "<param name=\"movie\" value=\"http://www.youtube.com/v/" + match[1] + "&hl=en_GB&fs=1\"></param>" +
				   "<param name=\"allowFullScreen\" value=\"true\"></param>" +
				   "<embed src=\"http://www.youtube.com/v/" + match[1] + "&hl=en_GB&fs=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed>" +
			   "</object>"
	}

[Alex Gyoshev]

Hello Daniel,

Great idea for the YouTube button!

In essence, the insertHtml command is consistent, but the object/embed tags lack presentation. You can easily fix that by adding a stylesheet with the following content to the editor:

object, embed
{
    background: none repeat scroll 0 0 red;
    border: 1px solid;
    display: block;
    height: 100px;
    width: 100px;
}

If you try to delete the object, however, it appears to be a bit cumbersome. Therefore, a simple presentational hack can provide better results: instead of inserting object/embed tags, insert a div placeholder that remembers the video id, and substitute it whenever you need the actual data:

// Function to turn a URL into a blob of XHTML for an embedded clip.
function CreateYouTubeXhtml(url) {
    // Regex to pull out the identifier from the URL.
    var match = /v=([^&]+)/i.exec(url);

    if (match == null) {
        return null;
    }

    return "<img class='youtube-video' data-url='" + match[1] + "' />";
}

function createYoutubeMovies(value) {
    var youtubeTag = "<object width='425' height='344'>" +
                "<param name='movie' value='http://www.youtube.com/v/$1&hl=en_GB&fs=1'></param>" +
                "<param name='allowFullScreen' value='true'></param>" +
                "<embed src='http://www.youtube.com/v/$1&hl=en_GB&fs=1' type='application/x-shockwave-flash' allowfullscreen='true' width='425' height='344'></embed>" +
            "</object>";

    return value.replace(/<img[^>]+data-url=\"([^\"]+)\"[^>]+\/>/gi, youtubeTag);
}

$('.btn').click(function () {
    var editor = $('#Note3').data('tEditor');

    var value = createYoutubeMovies(editor.value());

    $('#divOutput').html(value);
});

I am attaching the modified project. Hope that helps!

Greetings,
Alex Gyoshev
the Telerik team