Insert Video from Editor

[Alessandro]

I didn't find any preconstructed mode, from editor to add a video to the content.

If it can help anyone, here is my solution:

In the html

<div id="kVideoDialog"></div>

in script

$(document).ready(function () {
	var videoDia = $("#kVideoDialog");
		functionpasteVideoTo(editorToPaste) {
			let source = $("#source").val();
			let autoplay = $("#play").val() == 1 ? " autoplay" : null;
			let controls = $("#ctrl").val() == 1 ? " controls" : null;
			if(source != "") {
				editorToPaste.exec("insertHtml", { value: '<video' + controls + autoplay + '><source src="' + source + '"></video><p></p>'});
				return true;
			}
			return false;
				
			
		}
	
	functionopenVideoDialog(editorToPaste) {
		videoDia.kendoDialog({
			title: "Select Video",
			closable: true,
			modal: true,
			actions: [
				{ text: 'OK', primary: true,
					action: function (e) {

						return pasteVideoTo(editorToPaste);
				},
				},
				{ text: 'Annulla' },

			]
		});
		videoDia.data("kendoDialog").open();
		videoDia.html('<div id="videomanager"></div><div><label for="source">Sorgente Video:</label><br><input type="text" style="width: 100%;" id="source"><br><label for="play">Autoplay</label><input type="checkbox" value="1" id="play"><br><label for="ctrl">Show Controls</label><input type="checkbox" value="1" checked id="ctrl"></div>');
		
		$("#videomanager").kendoFileManager({
                dataSource: {
                   schema: kendo.data.schemas.filemanager,
                   transport: {
                    read: {
                        url: "/kendo-video-reader.php",
                        method: "POST"
                    },
                    create: {
                        url: "/kendo-fm-dir-maker.php",
                        method: "POST"
                    },
                    update: {
                        url: "/kendo-fm-updater.php",
                        method: "POST"
                    },
                    destroy: {
                        url: "/kendo-fm-deleter.php",
                        method: "POST"
                    }
                  }
               },
            uploadUrl: "/kendo-video-uploader.php",
		select: function(e) {
			let video = JSON.stringify(e.entries);
			const json = JSON.parse(video);
			const source = json[0].path;
			if(source.endsWith(".mp4") ||source.endsWith(".ogg") ||source.endsWith(".webm"))
				$("#source").val("/" + source);
			else
				$("#source").val("");
		},
            toolbar: {
                items: [
                    { name: "createFolder", text: "New Folder" },
                    { name: "upload", text: "Upload" },
                    { name: "sortDirection", text: "Sort" },
                    { name: "sortField", text: "Sort by" },
                    { name: "changeView", text: "Change View"},
                    { name: "spacer" },
                    { name: "details", text: "Details" },
                    { name: "search", text: "Search" }
                ]
            },
            contextMenu: {
                items: [
                    { name: "rename" },
                    { name: "delete" }
                ]
            },
            draggable: true,
            resizable: true
        });
            var filemanager = $("#videomanager").getKendoFileManager();
	}

//then in editor custom tools:
{  
	name: "insertVideo",
	text: "Insert Video",
        tooltip: "Select and insert Video",
        exec: function (e) {
                   var editor = $("#editor").data("kendoEditor");
	           openVideoDialog(editor);
         },
        icon: {
            viewBox: '0 0 512 512',
            content: '<rect style="fill: none;" width="523" height="523"/></rect>'+
		     '<path style="fill: #A59994;" d="M81 268l360 0 0 203 -360 0 0 -203zm199 63c10,0 19,9 19,19 0,10 -9,19 -19,19 -10,0 -19,-9 -19,-19 0,-10 9,-19 19,-19l0 0zm57 -38l-152 0c-7,0 -13,6 -13,13l0 127c0,7 6,13 13,13l152 0c7,0 13,-6 13,-13l0 -127c0,-7 -6,-13 -13,-13l0 0zm0 108l-25 -25 -32 32 -51 -51 -44 44 0 -95 0 0 152 0 0 0 0 95z"/></path>' + 
                     '<path style="fill: #A59994;" d="M81 52l360 0 0 203 -360 0 0 -203zm248 101l-68 31 -68 31 0 -62 0 -62 68 31 68 31z"/></path>' +
                     '<path style="fill: ##86776F;" d="M510 52l-68 0 0 203 -360 0 0 -203 -68 0 0 419 68 0 0 -203 360 0 0 203 68 0 0 -419zm-484 12l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm429 -353l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42z"/></path>'
        } 
 }

}
     

Bye.

Alessandro

[Neli]

Hi Alessandro,

You can take a look at the following KnoledgeBase article that dmeonstrates how content can be added through a custom tool in the Editor.

- https://docs.telerik.com/kendo-ui/knowledge-base/insert-html-via-custom-popup-tool

The, you can add the video as follows:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

I hope this helps.

Regards,

Neli