Actualización
This commit is contained in:
474
main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js
Normal file
474
main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js
Normal file
@@ -0,0 +1,474 @@
|
||||
CKEDITOR.dialog.add( 'video', function ( editor )
|
||||
{
|
||||
var lang = editor.lang.video;
|
||||
|
||||
function commitValue( videoNode, extraStyles )
|
||||
{
|
||||
var value=this.getValue();
|
||||
|
||||
if ( !value && this.id=='id' )
|
||||
value = generateId();
|
||||
|
||||
if (value == '') {
|
||||
// return;
|
||||
}
|
||||
|
||||
switch (this.id) {
|
||||
case '360video':
|
||||
if (value) {
|
||||
videoNode.setAttribute( 'data-360video', 'true' );
|
||||
} else {
|
||||
videoNode.removeAttribute( 'data-360video' );
|
||||
}
|
||||
break;
|
||||
case '360videostereo':
|
||||
if (videoNode.getAttribute( 'data-360video' ) === 'true') {
|
||||
if (!value) {
|
||||
videoNode.setAttribute( 'data-360video-stereo', 'false' );
|
||||
} else {
|
||||
videoNode.removeAttribute( 'data-360video-stereo' );
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
videoNode.setAttribute( this.id, value);
|
||||
}
|
||||
|
||||
if ( !value )
|
||||
return;
|
||||
switch( this.id )
|
||||
{
|
||||
case 'responsive':
|
||||
videoNode.addClass('embed-responsive-item');
|
||||
break;
|
||||
case 'poster':
|
||||
extraStyles.backgroundImage = 'url(' + value + ')';
|
||||
break;
|
||||
case 'width':
|
||||
extraStyles.width = value.indexOf('%') > 0 ? value : (parseInt(value) + 'px');
|
||||
break;
|
||||
case 'height':
|
||||
extraStyles.height = value.indexOf('%') > 0 ? value : (parseInt(value) + 'px');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function commitSrc( videoNode, extraStyles, videos )
|
||||
{
|
||||
var match = this.id.match(/(\w+)(\d)/),
|
||||
id = match[1],
|
||||
number = parseInt(match[2], 10);
|
||||
|
||||
var video = videos[number] || (videos[number]={});
|
||||
video[id] = this.getValue();
|
||||
}
|
||||
|
||||
function onChangeSrc( event )
|
||||
{
|
||||
var dialog = this.getDialog(),
|
||||
videoEl = document.createElement('video');
|
||||
|
||||
videoEl.onloadedmetadata = function () {
|
||||
dialog.setValueOf( 'info', 'width', videoEl.videoWidth );
|
||||
dialog.setValueOf( 'info', 'height', videoEl.videoHeight );
|
||||
};
|
||||
videoEl.src = location.origin + event.data.value;
|
||||
}
|
||||
|
||||
function loadValue( videoNode )
|
||||
{
|
||||
if ( videoNode ) {
|
||||
switch (this.id) {
|
||||
case '360video':
|
||||
this.setValue(videoNode.getAttribute( 'data-360video' ) === 'true');
|
||||
break;
|
||||
case '360videostereo':
|
||||
this.setValue(videoNode.getAttribute( 'data-360video-stereo' ) !== 'false');
|
||||
break;
|
||||
default:
|
||||
this.setValue( videoNode.getAttribute( this.id ) );
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( this.id == 'id')
|
||||
this.setValue( generateId() );
|
||||
}
|
||||
}
|
||||
|
||||
function loadSrc( videoNode, videos )
|
||||
{
|
||||
var match = this.id.match(/(\w+)(\d)/),
|
||||
id = match[1],
|
||||
number = parseInt(match[2], 10);
|
||||
|
||||
var video = videos[number];
|
||||
if (!video)
|
||||
return;
|
||||
this.setValue( video[ id ] );
|
||||
}
|
||||
|
||||
function generateId()
|
||||
{
|
||||
var now = new Date();
|
||||
return 'video' + now.getFullYear() + now.getMonth() + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds();
|
||||
}
|
||||
|
||||
// To automatically get the dimensions of the poster image
|
||||
var onImgLoadEvent = function()
|
||||
{
|
||||
// Image is ready.
|
||||
var preview = this.previewImage;
|
||||
preview.removeListener( 'load', onImgLoadEvent );
|
||||
preview.removeListener( 'error', onImgLoadErrorEvent );
|
||||
preview.removeListener( 'abort', onImgLoadErrorEvent );
|
||||
|
||||
this.setValueOf( 'info', 'width', preview.$.width );
|
||||
this.setValueOf( 'info', 'height', preview.$.height );
|
||||
};
|
||||
|
||||
var onImgLoadErrorEvent = function()
|
||||
{
|
||||
// Error. Image is not loaded.
|
||||
var preview = this.previewImage;
|
||||
preview.removeListener( 'load', onImgLoadEvent );
|
||||
preview.removeListener( 'error', onImgLoadErrorEvent );
|
||||
preview.removeListener( 'abort', onImgLoadErrorEvent );
|
||||
};
|
||||
|
||||
return {
|
||||
title : lang.dialogTitle,
|
||||
minWidth : 400,
|
||||
minHeight : 200,
|
||||
|
||||
onShow : function()
|
||||
{
|
||||
// Clear previously saved elements.
|
||||
this.fakeImage = this.videoNode = null;
|
||||
// To get dimensions of poster image
|
||||
this.previewImage = editor.document.createElement( 'img' );
|
||||
|
||||
var fakeImage = this.getSelectedElement();
|
||||
if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'video' )
|
||||
{
|
||||
this.fakeImage = fakeImage;
|
||||
|
||||
var videoNode = editor.restoreRealElement( fakeImage ),
|
||||
videos = [],
|
||||
sourceList = videoNode.getElementsByTag( 'source', '' );
|
||||
if (sourceList.count()==0)
|
||||
sourceList = videoNode.getElementsByTag( 'source', 'cke' );
|
||||
|
||||
for ( var i = 0, length = sourceList.count() ; i < length ; i++ )
|
||||
{
|
||||
var item = sourceList.getItem( i );
|
||||
videos.push( {src : item.getAttribute( 'src' ), type: item.getAttribute( 'type' )} );
|
||||
}
|
||||
|
||||
this.videoNode = videoNode;
|
||||
|
||||
this.setupContent( videoNode, videos );
|
||||
}
|
||||
else
|
||||
this.setupContent( null, [] );
|
||||
},
|
||||
|
||||
onOk : function()
|
||||
{
|
||||
// If there's no selected element create one. Otherwise, reuse it
|
||||
var videoNode = null;
|
||||
if ( !this.fakeImage )
|
||||
{
|
||||
videoNode = CKEDITOR.dom.element.createFromHtml( '<cke:video></cke:video>', editor.document );
|
||||
videoNode.setAttributes(
|
||||
{
|
||||
controls : 'controls'
|
||||
} );
|
||||
}
|
||||
else
|
||||
{
|
||||
videoNode = this.videoNode;
|
||||
}
|
||||
|
||||
var extraStyles = {}, videos = [];
|
||||
var responsive = this.getValueOf('info', 'responsive');
|
||||
|
||||
videoNode.removeClass('embed-responsive-item');
|
||||
|
||||
if (responsive) {
|
||||
this.setValueOf('info', 'width', '100%');
|
||||
this.setValueOf('info', 'height', '100%');
|
||||
}
|
||||
|
||||
this.commitContent( videoNode, extraStyles, videos );
|
||||
|
||||
var innerHtml = '', links = '',
|
||||
link = lang.linkTemplate || '',
|
||||
fallbackTemplate = lang.fallbackTemplate || '';
|
||||
for(var i=0; i<videos.length; i++)
|
||||
{
|
||||
var video = videos[i];
|
||||
if ( !video || !video.src )
|
||||
continue;
|
||||
innerHtml += '<cke:source src="' + video.src + '" type="' + video.type + '" />';
|
||||
links += link.replace('%src%', video.src).replace('%type%', video.type);
|
||||
}
|
||||
videoNode.setHtml( innerHtml + fallbackTemplate.replace( '%links%', links ) );
|
||||
|
||||
var responsiveParent = null;
|
||||
// Refresh the fake image.
|
||||
var newFakeImageClass = 'cke_video' + (responsive ? ' embed-responsive-item' : '');
|
||||
var newFakeImage = editor.createFakeElement( videoNode, newFakeImageClass, 'video', false );
|
||||
newFakeImage.setStyles( extraStyles );
|
||||
if ( this.fakeImage )
|
||||
{
|
||||
newFakeImage.replace( this.fakeImage );
|
||||
editor.getSelection().selectElement( newFakeImage );
|
||||
|
||||
if (responsive) {
|
||||
responsiveParent = newFakeImage.getParent();
|
||||
responsiveParent.removeClass('embed-responsive');
|
||||
responsiveParent.removeClass('embed-responsive-16by9');
|
||||
responsiveParent.removeClass('embed-responsive-9by16');
|
||||
responsiveParent.removeClass('embed-responsive-4by3');
|
||||
responsiveParent.removeClass('embed-responsive-3by4');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// Insert it in a div
|
||||
var div = new CKEDITOR.dom.element( 'DIV', editor.document );
|
||||
editor.insertElement( div );
|
||||
div.append( newFakeImage );
|
||||
|
||||
responsiveParent = div;
|
||||
}
|
||||
|
||||
if (responsive) {
|
||||
newFakeImage.addClass('embed-responsive-item');
|
||||
responsiveParent.addClass('embed-responsive');
|
||||
|
||||
switch (responsive) {
|
||||
case '16by9':
|
||||
responsiveParent.addClass('embed-responsive-16by9');
|
||||
break;
|
||||
case '9by16':
|
||||
responsiveParent.addClass('embed-responsive-9by16');
|
||||
break;
|
||||
case '4by3':
|
||||
responsiveParent.addClass('embed-responsive-4by3');
|
||||
break;
|
||||
case '3by4':
|
||||
responsiveParent.addClass('embed-responsive-3by4');
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onHide : function()
|
||||
{
|
||||
if ( this.previewImage )
|
||||
{
|
||||
this.previewImage.removeListener( 'load', onImgLoadEvent );
|
||||
this.previewImage.removeListener( 'error', onImgLoadErrorEvent );
|
||||
this.previewImage.removeListener( 'abort', onImgLoadErrorEvent );
|
||||
this.previewImage.remove();
|
||||
this.previewImage = null; // Dialog is closed.
|
||||
}
|
||||
},
|
||||
|
||||
contents :
|
||||
[
|
||||
{
|
||||
id : 'info',
|
||||
label: lang.infoLabel,
|
||||
elements :
|
||||
[
|
||||
{
|
||||
type : 'hbox',
|
||||
widths: [ '', '100px', '75px'],
|
||||
children : [
|
||||
{
|
||||
type : 'text',
|
||||
id : 'src0',
|
||||
label : lang.sourceVideo,
|
||||
onChange: onChangeSrc,
|
||||
commit : commitSrc,
|
||||
setup : loadSrc
|
||||
},
|
||||
{
|
||||
type : 'button',
|
||||
id : 'browse',
|
||||
hidden : 'true',
|
||||
style : 'display:inline-block;margin-top:10px;',
|
||||
filebrowser :
|
||||
{
|
||||
action : 'Browse',
|
||||
target: 'info:src0',
|
||||
url: editor.config.filebrowserVideoBrowseUrl || editor.config.filebrowserBrowseUrl
|
||||
},
|
||||
label : editor.lang.common.browseServer
|
||||
},
|
||||
{
|
||||
id : 'type0',
|
||||
label : lang.sourceType,
|
||||
type : 'select',
|
||||
'default' : 'video/mp4',
|
||||
items : editor.config.videoTypes,
|
||||
onChange: onChangeSrc,
|
||||
commit : commitSrc,
|
||||
setup : loadSrc
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
type : 'hbox',
|
||||
widths: [ '', '100px', '75px'],
|
||||
children : [
|
||||
{
|
||||
type : 'text',
|
||||
id : 'src1',
|
||||
label : lang.sourceVideo,
|
||||
commit : commitSrc,
|
||||
setup : loadSrc
|
||||
},
|
||||
{
|
||||
type : 'button',
|
||||
id : 'browse',
|
||||
hidden : 'true',
|
||||
style : 'display:inline-block;margin-top:10px;',
|
||||
filebrowser :
|
||||
{
|
||||
action : 'Browse',
|
||||
target: 'info:src1',
|
||||
url: editor.config.filebrowserVideoBrowseUrl || editor.config.filebrowserBrowseUrl
|
||||
},
|
||||
label : editor.lang.common.browseServer
|
||||
},
|
||||
{
|
||||
id : 'type1',
|
||||
label : lang.sourceType,
|
||||
type : 'select',
|
||||
'default':'video/webm',
|
||||
items : editor.config.videoTypes,
|
||||
commit : commitSrc,
|
||||
setup : loadSrc
|
||||
}]
|
||||
},
|
||||
{
|
||||
type : 'hbox',
|
||||
widths: [ '', '100px'],
|
||||
children : [
|
||||
{
|
||||
type : 'text',
|
||||
id : 'poster',
|
||||
label : lang.poster,
|
||||
commit : commitValue,
|
||||
setup : loadValue,
|
||||
onChange : function()
|
||||
{
|
||||
var dialog = this.getDialog(),
|
||||
newUrl = this.getValue();
|
||||
|
||||
//Update preview image
|
||||
if ( newUrl.length > 0 ) //Prevent from load before onShow
|
||||
{
|
||||
dialog = this.getDialog();
|
||||
var preview = dialog.previewImage;
|
||||
|
||||
preview.on( 'load', onImgLoadEvent, dialog );
|
||||
preview.on( 'error', onImgLoadErrorEvent, dialog );
|
||||
preview.on( 'abort', onImgLoadErrorEvent, dialog );
|
||||
preview.setAttribute( 'src', newUrl );
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'button',
|
||||
id : 'browse',
|
||||
hidden : 'true',
|
||||
style : 'display:inline-block;margin-top:10px;',
|
||||
filebrowser :
|
||||
{
|
||||
action : 'Browse',
|
||||
target: 'info:poster',
|
||||
url: editor.config.filebrowserImageBrowseUrl || editor.config.filebrowserBrowseUrl
|
||||
},
|
||||
label : editor.lang.common.browseServer
|
||||
}]
|
||||
},
|
||||
{
|
||||
type : 'hbox',
|
||||
widths: [ '33%', '33%', '33%'],
|
||||
children : [
|
||||
{
|
||||
type : 'text',
|
||||
id : 'width',
|
||||
label : editor.lang.common.width,
|
||||
'default' : 400,
|
||||
validate : CKEDITOR.dialog.validate.notEmpty( lang.widthRequired ),
|
||||
commit : commitValue,
|
||||
setup : loadValue
|
||||
},
|
||||
{
|
||||
type : 'text',
|
||||
id : 'height',
|
||||
label : editor.lang.common.height,
|
||||
'default' : 300,
|
||||
//validate : CKEDITOR.dialog.validate.notEmpty(lang.heightRequired ),
|
||||
commit : commitValue,
|
||||
setup : loadValue
|
||||
},
|
||||
{
|
||||
type : 'text',
|
||||
id : 'id',
|
||||
label : 'Id',
|
||||
commit : commitValue,
|
||||
setup : loadValue
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'radio',
|
||||
id: 'responsive',
|
||||
label: lang.responsive,
|
||||
items: [ [ lang.ratio16by9, '16by9' ], [ lang.ratio9by16, '9by16' ], [ lang.ratio4by3, '4by3' ], [ lang.ratio3by4, '3by4' ] ],
|
||||
commit : commitValue,
|
||||
setup : loadValue,
|
||||
onChange: function () {
|
||||
var dialog = this.getDialog();
|
||||
|
||||
dialog.setValueOf('info', 'width', '100%');
|
||||
dialog.setValueOf('info', 'height', '100%');
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '360',
|
||||
label: '360°',
|
||||
elements: [
|
||||
{
|
||||
type : 'html',
|
||||
html : lang.html360
|
||||
},
|
||||
{
|
||||
type : 'checkbox',
|
||||
id : '360video',
|
||||
label: lang.video360,
|
||||
commit : commitValue,
|
||||
setup : loadValue
|
||||
},
|
||||
{
|
||||
type : 'checkbox',
|
||||
id : '360videostereo',
|
||||
label : lang.video360stereo,
|
||||
'default': 'checked',
|
||||
commit : commitValue,
|
||||
setup : loadValue
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
} );
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Video plugin</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Video Plugin for CKEditor</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>This is a plugin to create HTML5 <video> elements in <a href="http://www.ckeditor.com">CKEditor</a>.</p>
|
||||
|
||||
<h3 id="contact">Author:</h3>
|
||||
<p><a href="mailto:amla70@gmail.com">Alfonso Martínez de Lizarrondo</a></p>
|
||||
<h3>Sponsored by:</h3>
|
||||
<p><a href="http://dmlogic.net/">DM logic</a></p>
|
||||
<h3>Version history: </h3>
|
||||
<ol>
|
||||
<li>1.0: 19-January-2011. First version.</li>
|
||||
<li>1.1: 21-January-2011. Several bug fixes. Detect poster image dimensions. Complete localization.</li>
|
||||
<li>1.2: 24-January-2011. Better dialog layout, specific filebrowserVideoBrowseUrl entry.</li>
|
||||
</ol>
|
||||
<p>Check for latest version and other <a href="http://alfonsoml.blogspot.com">CKEditor plugins</a></p>
|
||||
|
||||
<h2>Installation</h2>
|
||||
<h3>1. Copying the files</h3>
|
||||
<p>Extract the contents of the zip in you plugins directory, so it ends up like
|
||||
this<br>
|
||||
<!--<img src="installation.png" alt="Screenshot of installation" width="311" height="346" longdesc="#install">-->
|
||||
</p>
|
||||
<pre id="--install">
|
||||
ckeditor\
|
||||
...
|
||||
images\
|
||||
lang\
|
||||
plugins\
|
||||
...
|
||||
video\
|
||||
plugin.js
|
||||
dialogs\
|
||||
video.js
|
||||
docs\
|
||||
install.html
|
||||
images\
|
||||
icon.png
|
||||
placeholder.png
|
||||
...
|
||||
skins\
|
||||
themes\
|
||||
</pre>
|
||||
<h3>2. Adding it to CKEditor</h3>
|
||||
<p>Now add the plugin in your <em>config.js</em> or custom js configuration
|
||||
file:
|
||||
<code>config.extraPlugins='video'; </code>
|
||||
</p>
|
||||
|
||||
<h3>3. Add it to your toolbar</h3>
|
||||
<p>In your toolbar configuration, add a new 'Video' item in the place where you want the button to show up.</p>
|
||||
|
||||
<h3>4. Configure server browser for video</h3>
|
||||
<p>You can use the <code>config.filebrowserVideoBrowseUrl</code> entry to specify a url so the file browser shows just video elements (as long as your configure properly your file browser).</p>
|
||||
|
||||
<h3>5. Use it</h3>
|
||||
<p>Now empty the cache of your browser and reload the editor, the new button should show up and you can add <video> elements into the content. Here's a <a href="http://www.youtube.com/watch?v=DVKuGO-2-LY">short video of the plugin in action</a>.</p>
|
||||
|
||||
<h2>Final notes</h2>
|
||||
<p>This plugin has been coded for CKEditor 3.5. It might be possible to backport it for older versions, but I don't think that it's worth the effort as sooner
|
||||
or later those installs will (or should) be upgraded to the current version.</p>
|
||||
<p>Please, note that only newer browsers support the Video element, in older ones a simple text linking to the source videos is provided, you might want to
|
||||
use some javascript or css to customize the final behavior of these elements.</p>
|
||||
|
||||
|
||||
<h2>Disclaimers</h2>
|
||||
<p>CKEditor is © CKSource.com</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 90%;
|
||||
}
|
||||
h1 {
|
||||
text-align:center;
|
||||
font-size:180%;
|
||||
}
|
||||
h2 {
|
||||
border-bottom:2px solid #CCC;
|
||||
margin:1em 0 0.4em 0;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom:0.4em;
|
||||
}
|
||||
p {
|
||||
margin:0 0 1em 1em;
|
||||
text-align:justify;
|
||||
}
|
||||
ol {
|
||||
margin:0 0 1.2em 1em;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
ol li {
|
||||
margin:0.2em 0;
|
||||
}
|
||||
pre {
|
||||
font-size:100%;
|
||||
font-family:"Courier New", Courier, mono;
|
||||
background-color: #CCCCCC;
|
||||
border:1px solid #999;
|
||||
padding:0.2em 1em;
|
||||
margin: 0.4em 0;
|
||||
display:block;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
}
|
||||
code {
|
||||
font-size:100%;
|
||||
font-family:"Courier New", Courier, mono;
|
||||
background-color: #CCCCCC;
|
||||
border:1px solid #999;
|
||||
padding:0.2em;
|
||||
white-space: pre;
|
||||
}
|
||||
form {
|
||||
margin:0 0 0 1em;
|
||||
}
|
||||
span.key {
|
||||
color: #006600;
|
||||
}
|
||||
#install {
|
||||
display:none
|
||||
}
|
||||
#languages ul {
|
||||
display:inline;
|
||||
list-style-type:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
#languages li {
|
||||
display:inline;
|
||||
margin:0;
|
||||
padding:0;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
BIN
main/inc/lib/javascript/ckeditor/plugins/video/images/icon.png
Normal file
BIN
main/inc/lib/javascript/ckeditor/plugins/video/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 986 B |
263
main/inc/lib/javascript/ckeditor/plugins/video/plugin.js
Normal file
263
main/inc/lib/javascript/ckeditor/plugins/video/plugin.js
Normal file
@@ -0,0 +1,263 @@
|
||||
/*
|
||||
* @file Video plugin for CKEditor
|
||||
* Copyright (C) 2011 Alfonso Martínez de Lizarrondo
|
||||
*
|
||||
* == BEGIN LICENSE ==
|
||||
*
|
||||
* Licensed under the terms of any of the following licenses at your
|
||||
* choice:
|
||||
*
|
||||
* - GNU General Public License Version 2 or later (the "GPL")
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
|
||||
* http://www.gnu.org/licenses/lgpl.html
|
||||
*
|
||||
* - Mozilla Public License Version 1.1 or later (the "MPL")
|
||||
* http://www.mozilla.org/MPL/MPL-1.1.html
|
||||
*
|
||||
* == END LICENSE ==
|
||||
*
|
||||
*/
|
||||
|
||||
( function() {
|
||||
|
||||
CKEDITOR.plugins.add( 'video',
|
||||
{
|
||||
// Translations, available at the end of this file, without extra requests
|
||||
lang : [ 'en', 'es' ],
|
||||
|
||||
getPlaceholderCss : function()
|
||||
{
|
||||
return 'img.cke_video' +
|
||||
'{' +
|
||||
'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
|
||||
'background-position: center center;' +
|
||||
'background-repeat: no-repeat;' +
|
||||
'background-color:gray;'+
|
||||
'border: 1px solid #a9a9a9;' +
|
||||
'width: 80px;' +
|
||||
'height: 80px;' +
|
||||
'}';
|
||||
},
|
||||
|
||||
onLoad : function()
|
||||
{
|
||||
// v4
|
||||
if (CKEDITOR.addCss)
|
||||
CKEDITOR.addCss( this.getPlaceholderCss() );
|
||||
|
||||
},
|
||||
|
||||
init : function( editor )
|
||||
{
|
||||
var lang = editor.lang.video;
|
||||
|
||||
// Check for CKEditor 3.5
|
||||
if (typeof editor.element.data == 'undefined')
|
||||
{
|
||||
alert('The "video" plugin requires CKEditor 3.5 or newer');
|
||||
return;
|
||||
}
|
||||
|
||||
CKEDITOR.dialog.add( 'video', this.path + 'dialogs/video.js' );
|
||||
|
||||
editor.addCommand( 'Video', new CKEDITOR.dialogCommand( 'video' ) );
|
||||
editor.ui.addButton( 'Video',
|
||||
{
|
||||
label : lang.toolbar,
|
||||
command : 'Video',
|
||||
icon : this.path + 'images/icon.png'
|
||||
} );
|
||||
|
||||
// v3
|
||||
if (editor.addCss)
|
||||
editor.addCss( this.getPlaceholderCss() );
|
||||
|
||||
|
||||
// If the "menu" plugin is loaded, register the menu items.
|
||||
if ( editor.addMenuItems )
|
||||
{
|
||||
editor.addMenuItems(
|
||||
{
|
||||
video :
|
||||
{
|
||||
label : lang.properties,
|
||||
command : 'Video',
|
||||
group : 'flash'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
editor.on( 'doubleclick', function( evt )
|
||||
{
|
||||
var element = evt.data.element;
|
||||
|
||||
if ( element.is( 'img' ) && element.data( 'cke-real-element-type' ) == 'video' )
|
||||
evt.data.dialog = 'video';
|
||||
});
|
||||
|
||||
// If the "contextmenu" plugin is loaded, register the listeners.
|
||||
if ( editor.contextMenu )
|
||||
{
|
||||
editor.contextMenu.addListener( function( element, selection )
|
||||
{
|
||||
if ( element && element.is( 'img' ) && !element.isReadOnly()
|
||||
&& element.data( 'cke-real-element-type' ) == 'video' )
|
||||
return { video : CKEDITOR.TRISTATE_OFF };
|
||||
});
|
||||
}
|
||||
|
||||
// Add special handling for these items
|
||||
CKEDITOR.dtd.$empty['cke:source']=1;
|
||||
CKEDITOR.dtd.$empty['source']=1;
|
||||
|
||||
editor.lang.fakeobjects.video = lang.fakeObject;
|
||||
|
||||
|
||||
}, //Init
|
||||
|
||||
afterInit: function( editor )
|
||||
{
|
||||
var dataProcessor = editor.dataProcessor,
|
||||
htmlFilter = dataProcessor && dataProcessor.htmlFilter,
|
||||
dataFilter = dataProcessor && dataProcessor.dataFilter;
|
||||
|
||||
// dataFilter : conversion from html input to internal data
|
||||
dataFilter.addRules(
|
||||
{
|
||||
|
||||
elements : {
|
||||
$ : function( realElement )
|
||||
{
|
||||
if ( realElement.name == 'video' )
|
||||
{
|
||||
realElement.name = 'cke:video';
|
||||
for( var i=0; i < realElement.children.length; i++)
|
||||
{
|
||||
if ( realElement.children[ i ].name == 'source' )
|
||||
realElement.children[ i ].name = 'cke:source'
|
||||
}
|
||||
|
||||
var fakeElement = editor.createFakeParserElement(
|
||||
realElement,
|
||||
'cke_video ' + realElement.attributes.class,
|
||||
'video',
|
||||
false
|
||||
),
|
||||
fakeStyle = fakeElement.attributes.style || '';
|
||||
|
||||
var width = realElement.attributes.width,
|
||||
height = realElement.attributes.height,
|
||||
poster = realElement.attributes.poster,
|
||||
responsive = realElement.attributes.responsive;
|
||||
|
||||
if ( typeof width != 'undefined' )
|
||||
fakeStyle = fakeElement.attributes.style = fakeStyle + 'width:' + CKEDITOR.tools.cssLength( width ) + ';';
|
||||
|
||||
if ( typeof height != 'undefined' )
|
||||
fakeStyle = fakeElement.attributes.style = fakeStyle + 'height:' + CKEDITOR.tools.cssLength( height ) + ';';
|
||||
|
||||
if ( poster )
|
||||
fakeStyle = fakeElement.attributes.style = fakeStyle + 'background-image:url(' + poster + ');';
|
||||
|
||||
if (typeof responsive != 'undefined' && responsive && responsive !== 'null') {
|
||||
fakeElement.addClass('embed-responsive-item');
|
||||
}
|
||||
|
||||
return fakeElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
} // afterInit
|
||||
|
||||
} ); // plugins.add
|
||||
|
||||
|
||||
var en = {
|
||||
toolbar: 'Video',
|
||||
dialogTitle: 'Video properties',
|
||||
fakeObject: 'Video',
|
||||
properties: 'Edit video',
|
||||
widthRequired: 'Width field cannot be empty',
|
||||
heightRequired: 'Height field cannot be empty',
|
||||
poster: 'Poster image',
|
||||
sourceVideo: 'Source video',
|
||||
sourceType: 'Video type',
|
||||
linkTemplate: '<a href="%src%">%type%</a> ',
|
||||
fallbackTemplate: 'Your browser doesn\'t support video.<br>Please download the file: %links%',
|
||||
infoLabel: 'Information',
|
||||
html360: 'This feature (only MP4 videos) is currently still in BETA mode.<br />It only works on dynamic pages, not inside documents created<br />in the documents tool or seen through learning paths.<br />Please do not add more than one 360° video on a single page<br /> as more than one on the same page might generate conflicts.',
|
||||
video360: 'Enable 360° video player',
|
||||
video360stereo: 'Stereo video (1:1 aspect ratio)',
|
||||
responsive: 'Resposive size (mobile-optimized)',
|
||||
ratio16by9: '16:9 aspect ratio (horizontal)',
|
||||
ratio9by16: '9:16 aspect ratio (vertical)',
|
||||
ratio4by3: '4:3 aspect ratio (horizontal)',
|
||||
ratio3by4: '3:4 aspect ratio (vertical)'
|
||||
};
|
||||
|
||||
var es = {
|
||||
toolbar: 'Vídeo',
|
||||
dialogTitle: 'Propiedades del vídeo',
|
||||
fakeObject: 'Vídeo',
|
||||
properties: 'Editar el vídeo',
|
||||
widthRequired: 'La anchura no se puede dejar en blanco',
|
||||
heightRequired: 'La altura no se puede dejar en blanco',
|
||||
poster: 'Imagen de presentación',
|
||||
sourceVideo: 'Archivo de vídeo',
|
||||
sourceType: 'Tipo',
|
||||
linkTemplate: '<a href="%src%">%type%</a> ',
|
||||
fallbackTemplate: 'Su navegador no soporta el tag video.<br>Por favor, descargue el fichero: %links%',
|
||||
infoLabel: 'Información',
|
||||
html360: 'Esta funcionalidad (sólo MP4) todavía se encuentra en modo BETA.<br />Sólo funciona en páginas dinámicas, mas no dentro de documentos<br />creados en la herramienta de documentos o visualizados a través<br />de las lecciones.<br />Por favor no colocar más de un vídeo 360° en una misma página<br />ya que puede provocar conflictos y bloquearlos todos.',
|
||||
video360: 'Habilitar reproductor de vídeo 360°',
|
||||
video360stereo: 'Vídeo estéreo (relación de aspecto 1:1)',
|
||||
responsive: 'Tamaño adaptable (tamaño optimizado para móviles)',
|
||||
ratio16by9: 'Relación de aspecto 16:9 (horizontal)',
|
||||
ratio9by16: 'Relación de aspecto 9:16 (vertical)',
|
||||
ratio4by3: 'Relación de aspecto 4:3 (horizontal)',
|
||||
ratio3by4: 'Relación de aspecto 3:4 (vertical)'
|
||||
};
|
||||
|
||||
var fr = {
|
||||
toolbar: 'Vidéo',
|
||||
dialogTitle: 'Propiétés de la vidéo',
|
||||
fakeObject: 'Vidéo',
|
||||
properties: 'Éditer la vidéo',
|
||||
widthRequired: 'La largeur ne peut pas être vide',
|
||||
heightRequired: 'La hauteur ne peut pas être vide',
|
||||
poster: 'Image de prévisualisation',
|
||||
sourceVideo: 'Fichier vidéo',
|
||||
sourceType: 'Type',
|
||||
linkTemplate: '<a href="%src%">%type%</a> ',
|
||||
fallbackTemplate: 'Votre navigateur ne supporte pas le tag video.<br>Merci de télécharger la vidéo ici: %links%',
|
||||
infoLabel: 'Information',
|
||||
html360: 'Cette fonctionnalité (MP4 uniquement) est actuellement en mode BETA.<br />Elle ne fonctionne que sur les pages dynamiques, et pas<br />dans les documents créés à partir de l\'outil document ou visualisés<br />au travers de l\'outil parcours.<br />Merci de ne pas placer plus d\'une vidéo 360° par page. Cela<br />peut causer des conflits et toutes les rendre inactives.',
|
||||
video360: 'Activer la visualisation 360°',
|
||||
video360stereo: 'Vidéo stéréo (proportions 1:1 / apparence de 2 vidéos superposées)',
|
||||
responsive: 'Resposive',
|
||||
ratio16by9: '16:9 aspect ratio (horizontal)',
|
||||
ratio9by16: '9:16 aspect ratio (vertical)',
|
||||
ratio4by3: '4:3 aspect ratio (horizontal)',
|
||||
ratio3by4: '3:4 aspect ratio (vertical)'
|
||||
};
|
||||
|
||||
// v3
|
||||
if (CKEDITOR.skins)
|
||||
{
|
||||
en = { video : en} ;
|
||||
es = { video : es} ;
|
||||
fr = { video : fr} ;
|
||||
}
|
||||
|
||||
// Translations
|
||||
CKEDITOR.plugins.setLang( 'video', 'en', en );
|
||||
CKEDITOR.plugins.setLang( 'video', 'es', es );
|
||||
CKEDITOR.plugins.setLang( 'video', 'fr', fr );
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user