217 lines
6.2 KiB
JavaScript
217 lines
6.2 KiB
JavaScript
/*
|
|
* Youtube Embed Plugin
|
|
*
|
|
* @author Jonnas Fonini <contato@fonini.net>
|
|
* @version 2.0.0
|
|
*/
|
|
(function () {
|
|
CKEDITOR.plugins.add('youtube',
|
|
{
|
|
lang: ['en', 'pt', 'ja', 'hu', 'it', 'fr', 'tr', 'ru', 'de', 'ar', 'nl', 'pl', 'vi', 'zh', 'el'],
|
|
init: function (editor) {
|
|
editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube', {
|
|
allowedContent: 'iframe[!width,!height,!src,!frameborder,!allowfullscreen]; object param[*]; div[*]'
|
|
}));
|
|
|
|
editor.ui.addButton('Youtube',
|
|
{
|
|
label: editor.lang.youtube.button,
|
|
toolbar: 'insert',
|
|
command: 'youtube',
|
|
icon: this.path + 'images/icon.png'
|
|
});
|
|
|
|
CKEDITOR.dialog.add('youtube', function (instance) {
|
|
var host, video;
|
|
|
|
return {
|
|
title: editor.lang.youtube.title,
|
|
minWidth: 500,
|
|
minHeight: 200,
|
|
contents: [{
|
|
id: 'youtubePlugin',
|
|
expand: true,
|
|
elements: [{
|
|
id: 'txtEmbed',
|
|
type: 'textarea',
|
|
label: editor.lang.youtube.txtEmbed,
|
|
autofocus: 'autofocus',
|
|
onChange: function (api) {
|
|
handleEmbedChange(this, api);
|
|
},
|
|
onKeyUp: function (api) {
|
|
handleEmbedChange(this, api);
|
|
},
|
|
validate: function () {
|
|
if (this.isEnabled()) {
|
|
if (!this.getValue()) {
|
|
alert(editor.lang.youtube.noCode);
|
|
return false;
|
|
}
|
|
else if (this.getValue().length === 0 || this.getValue().indexOf('//') === -1) {
|
|
alert(editor.lang.youtube.invalidEmbed);
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'html',
|
|
html: editor.lang.youtube.or + '<hr>'
|
|
},
|
|
{
|
|
type: 'hbox',
|
|
widths: ['70%', '15%', '15%'],
|
|
children: [
|
|
{
|
|
id: 'txtUrl',
|
|
type: 'text',
|
|
label: editor.lang.youtube.txtUrl,
|
|
onChange: function (api) {
|
|
handleLinkChange(this, api);
|
|
},
|
|
onKeyUp: function (api) {
|
|
handleLinkChange(this, api);
|
|
},
|
|
validate: function () {
|
|
if (this.isEnabled()) {
|
|
if (!this.getValue()) {
|
|
alert(editor.lang.youtube.noCode);
|
|
return false;
|
|
}
|
|
else {
|
|
var parsedUrl = ytVidId(this.getValue());
|
|
video = parsedUrl.video;
|
|
host = parsedUrl.host;
|
|
if(host === 'vimeo.com') {
|
|
video = checkVimeoVideo(video, this.getValue());
|
|
}
|
|
|
|
if (this.getValue().length === 0 || parsedUrl === false) {
|
|
alert(editor.lang.youtube.invalidUrl);
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'text',
|
|
id: 'txtWidth',
|
|
width: '60px',
|
|
label: editor.lang.youtube.txtWidth,
|
|
'default': editor.config.youtube_width != null ? editor.config.youtube_width : '640',
|
|
validate: function () {
|
|
if (this.getValue()) {
|
|
var width = parseInt(this.getValue()) || 0;
|
|
|
|
if (width === 0) {
|
|
alert(editor.lang.youtube.invalidWidth);
|
|
return false;
|
|
}
|
|
}
|
|
else {
|
|
alert(editor.lang.youtube.noWidth);
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'text',
|
|
id: 'txtHeight',
|
|
width: '60px',
|
|
label: editor.lang.youtube.txtHeight,
|
|
'default': editor.config.youtube_height != null ? editor.config.youtube_height : '360',
|
|
validate: function () {
|
|
if (this.getValue()) {
|
|
var height = parseInt(this.getValue()) || 0;
|
|
|
|
if (height === 0) {
|
|
alert(editor.lang.youtube.invalidHeight);
|
|
return false;
|
|
}
|
|
}
|
|
else {
|
|
alert(editor.lang.youtube.noHeight);
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
]
|
|
}
|
|
],
|
|
onOk: function () {
|
|
var content = '';
|
|
var responsiveStyle = '';
|
|
|
|
if (this.getContentElement('youtubePlugin', 'txtEmbed').isEnabled()) {
|
|
content = '<p>' + this.getValueOf('youtubePlugin', 'txtEmbed') + '</p>';
|
|
}
|
|
else {
|
|
var url = '//', params = [], startSecs;
|
|
var width = this.getValueOf('youtubePlugin', 'txtWidth');
|
|
var height = this.getValueOf('youtubePlugin', 'txtHeight');
|
|
|
|
if (host == 'vimeo.com') {
|
|
url += 'player.vimeo.com/video/' + video
|
|
}
|
|
else {
|
|
url += 'www.youtube.com/embed/' + video;
|
|
}
|
|
|
|
//content += '<div style="position: relative;">';
|
|
content += '<p><iframe width="' + width + '" height="' + height + '" src="' + url + '" ' + responsiveStyle;
|
|
content += 'frameborder="0" allowfullscreen></iframe><p>';
|
|
//content += '<div class="ka-ckeditor__iframe-blocker" style="position: absolute; top: 0; left: 0; width:' + width + 'px; height:' + height + 'px"></div></div>';
|
|
|
|
|
|
}
|
|
|
|
var element = CKEDITOR.dom.element.createFromHtml(content);
|
|
var instance = this.getParentEditor();
|
|
instance.insertElement(element);
|
|
}
|
|
};
|
|
});
|
|
}
|
|
});
|
|
|
|
function ytVidId(url) {
|
|
if (!/^(f|ht)tps?:\/\//i.test(url)) {
|
|
url = "http://" + url;
|
|
}
|
|
var p = /(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/;
|
|
return ( url.match(p) ) ? {host: RegExp.$3, video: RegExp.$6} : false;
|
|
}
|
|
|
|
function checkVimeoVideo(video, url){
|
|
if(!parseInt(video)){
|
|
return url.split('/').pop(); //if url looks like: "https://vimeo.com/channels/staffpicks/117669654"
|
|
}
|
|
return video;
|
|
}
|
|
|
|
function handleLinkChange( el, api )
|
|
{
|
|
if ( el.getValue().length > 0 )
|
|
{
|
|
el.getDialog().getContentElement( 'youtubePlugin', 'txtEmbed' ).disable();
|
|
}
|
|
else {
|
|
el.getDialog().getContentElement( 'youtubePlugin', 'txtEmbed' ).enable();
|
|
}
|
|
}
|
|
|
|
function handleEmbedChange( el, api )
|
|
{
|
|
if ( el.getValue().length > 0 )
|
|
{
|
|
el.getDialog().getContentElement( 'youtubePlugin', 'txtUrl' ).disable();
|
|
}
|
|
else {
|
|
el.getDialog().getContentElement( 'youtubePlugin', 'txtUrl' ).enable();
|
|
}
|
|
}
|
|
})(); |