upgrade
This commit is contained in:
275
main/inc/lib/javascript/ckeditor/plugins/audio/dialogs/audio.js
Normal file
275
main/inc/lib/javascript/ckeditor/plugins/audio/dialogs/audio.js
Normal file
@@ -0,0 +1,275 @@
|
||||
CKEDITOR.dialog.add('audio', function(editor)
|
||||
{
|
||||
var lang = editor.lang.audio;
|
||||
|
||||
function commitValue(audioNode, extraStyles) {
|
||||
var value = this.getValue();
|
||||
|
||||
if (!value && this.id == 'id') {
|
||||
value = generateId();
|
||||
}
|
||||
|
||||
switch (this.id) {
|
||||
case 'width':
|
||||
audioNode.setAttribute('style', 'width:' + value + 'px;');
|
||||
extraStyles.width = value + 'px';
|
||||
//no break
|
||||
case 'id':
|
||||
audioNode.setAttribute(this.id, value);
|
||||
break;
|
||||
case 'autoplay':
|
||||
if (value === true) {
|
||||
audioNode.setAttribute('autoplay', 'autoplay');
|
||||
break;
|
||||
}
|
||||
|
||||
audioNode.removeAttribute('autoplay');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function commitSrc(audioNode, extraStyles, audios) {
|
||||
var match = this.id.match(/(\w+)(\d)/),
|
||||
id = match[1],
|
||||
number = parseInt(match[2], 10);
|
||||
|
||||
var audio = audios[number] || (audios[number] = {});
|
||||
audio[id] = this.getValue();
|
||||
}
|
||||
|
||||
function loadValue(audioNode) {
|
||||
if (audioNode) {
|
||||
var value = audioNode.getAttribute(this.id);
|
||||
|
||||
if (this.id != 'autoplay') {
|
||||
this.setValue(value);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.setValue(value === 'autoplay');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.id == 'id') {
|
||||
this.setValue(generateId());
|
||||
}
|
||||
}
|
||||
|
||||
function loadSrc(audioNode, audios) {
|
||||
var match = this.id.match(/(\w+)(\d)/),
|
||||
id = match[1],
|
||||
number = parseInt(match[2], 10);
|
||||
|
||||
var audio = audios[number];
|
||||
|
||||
if (!audio) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setValue(audio[ id ]);
|
||||
}
|
||||
|
||||
function generateId() {
|
||||
var now = new Date();
|
||||
return 'audio' + now.getFullYear() + now.getMonth() + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds();
|
||||
}
|
||||
|
||||
return {
|
||||
title: lang.dialogTitle,
|
||||
minWidth: 400,
|
||||
minHeight: 200,
|
||||
onShow: function() {
|
||||
// Clear previously saved elements.
|
||||
this.fakeImage = this.audioNode = null;
|
||||
|
||||
var fakeImage = this.getSelectedElement();
|
||||
|
||||
if (fakeImage && fakeImage.data('cke-real-element-type') && fakeImage.data('cke-real-element-type') == 'audio') {
|
||||
this.fakeImage = fakeImage;
|
||||
|
||||
var audioNode = editor.restoreRealElement(fakeImage),
|
||||
audios = [],
|
||||
sourceList = audioNode.getElementsByTag('source', '');
|
||||
|
||||
if (sourceList.count() == 0) {
|
||||
sourceList = audioNode.getElementsByTag('source', 'cke');
|
||||
}
|
||||
|
||||
for (var i = 0, length = sourceList.count(); i < length; i++) {
|
||||
var item = sourceList.getItem(i);
|
||||
audios.push({src: item.getAttribute('src'), type: item.getAttribute('type')});
|
||||
}
|
||||
|
||||
this.audioNode = audioNode;
|
||||
|
||||
this.setupContent(audioNode, audios);
|
||||
} else {
|
||||
this.setupContent(null, []);
|
||||
}
|
||||
},
|
||||
onOk: function() {
|
||||
// If there's no selected element create one. Otherwise, reuse it
|
||||
var audioNode = null;
|
||||
|
||||
if (!this.fakeImage) {
|
||||
audioNode = CKEDITOR.dom.element.createFromHtml('<cke:audio></cke:audio>', editor.document);
|
||||
audioNode.setAttributes({
|
||||
controls: 'controls'
|
||||
});
|
||||
} else {
|
||||
audioNode = this.audioNode;
|
||||
}
|
||||
|
||||
var extraStyles = {}, audios = [];
|
||||
this.commitContent(audioNode, extraStyles, audios);
|
||||
|
||||
var innerHtml = '', links = '',
|
||||
link = lang.linkTemplate || '',
|
||||
fallbackTemplate = lang.fallbackTemplate || '';
|
||||
|
||||
for (var i = 0; i < audios.length; i++) {
|
||||
var audio = audios[i];
|
||||
|
||||
if (!audio || !audio.src) {
|
||||
continue;
|
||||
}
|
||||
innerHtml += '<cke:source src="' + audio.src + '" type="' + audio.type + '" />';
|
||||
links += link.replace('%src%', audio.src).replace('%type%', audio.type);
|
||||
}
|
||||
|
||||
audioNode.setHtml(innerHtml + fallbackTemplate.replace('%links%', links));
|
||||
|
||||
// Refresh the fake image.
|
||||
var newFakeImage = editor.createFakeElement(audioNode, 'cke_audio', 'audio', false);
|
||||
newFakeImage.setStyles(extraStyles);
|
||||
|
||||
if (this.fakeImage) {
|
||||
newFakeImage.replace(this.fakeImage);
|
||||
editor.getSelection().selectElement(newFakeImage);
|
||||
} else {
|
||||
// Insert it in a div
|
||||
var div = new CKEDITOR.dom.element('DIV', editor.document);
|
||||
editor.insertElement(div);
|
||||
div.append(newFakeImage);
|
||||
}
|
||||
},
|
||||
contents: [
|
||||
{
|
||||
id: 'info',
|
||||
elements: [
|
||||
{
|
||||
type: 'hbox',
|
||||
widths: ['20%', '80%'],
|
||||
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: 'id',
|
||||
label: 'Id',
|
||||
commit: commitValue,
|
||||
setup: loadValue
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'hbox',
|
||||
widths: ['', '100px', '75px'],
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
id: 'src0',
|
||||
label: lang.sourceAudio,
|
||||
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.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl
|
||||
},
|
||||
label: editor.lang.common.browseServer
|
||||
},
|
||||
{
|
||||
id: 'type0',
|
||||
label: lang.sourceType,
|
||||
type: 'select',
|
||||
'default': 'audio/mp3',
|
||||
items: [
|
||||
['MP3', 'audio/mp3'],
|
||||
['OGG', 'audio/ogg']
|
||||
],
|
||||
commit: commitSrc,
|
||||
setup: loadSrc
|
||||
}]
|
||||
},
|
||||
{
|
||||
type: 'hbox',
|
||||
widths: ['', '100px', '75px'],
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
id: 'src1',
|
||||
label: lang.sourceAudio,
|
||||
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.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl
|
||||
},
|
||||
label: editor.lang.common.browseServer
|
||||
},
|
||||
{
|
||||
id: 'type1',
|
||||
label: lang.sourceType,
|
||||
type: 'select',
|
||||
'default': 'audio/webm',
|
||||
items: [
|
||||
['MP3', 'audio/mp3'],
|
||||
['OGG', 'audio/ogg']
|
||||
],
|
||||
commit: commitSrc,
|
||||
setup: loadSrc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'hbox',
|
||||
width: ['100%'],
|
||||
children: [
|
||||
{
|
||||
id: 'autoplay',
|
||||
type: 'checkbox',
|
||||
label: lang.autoPlay,
|
||||
'default': false,
|
||||
commit: commitValue,
|
||||
setup: loadValue
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
<!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>Audio plugin</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Audio Plugin for CKEditor</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>This is a plugin to create HTML5 <audio> elements in <a href="http://www.ckeditor.com">CKEditor</a>.</p>
|
||||
|
||||
<h3 id="contact">Author:</h3>
|
||||
<p><a href="https://www.beeznest.com">BeezNest Latino S.A.C</a></p>
|
||||
<h3>Version history: </h3>
|
||||
<ol>
|
||||
<li>1.0: 14-November-2014. First version.</li>
|
||||
</ol>
|
||||
|
||||
<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>
|
||||
</p>
|
||||
<pre id="--install">
|
||||
ckeditor\
|
||||
...
|
||||
images\
|
||||
lang\
|
||||
plugins\
|
||||
...
|
||||
audio\
|
||||
plugin.js
|
||||
dialogs\
|
||||
audio.js
|
||||
docs\
|
||||
install.html
|
||||
styles.css
|
||||
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='audio'; </code>
|
||||
</p>
|
||||
|
||||
<h3>3. Add it to your toolbar</h3>
|
||||
<p>In your toolbar configuration, add a new 'Audio' 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 audio 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 <audio> elements into the content.</p>
|
||||
|
||||
<h2>Final notes</h2>
|
||||
<p>This plugin has been coded for CKEditor 4.4.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 Audio 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/audio/images/icon.png
Normal file
BIN
main/inc/lib/javascript/ckeditor/plugins/audio/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 B |
Binary file not shown.
|
After Width: | Height: | Size: 983 B |
194
main/inc/lib/javascript/ckeditor/plugins/audio/plugin.js
Normal file
194
main/inc/lib/javascript/ckeditor/plugins/audio/plugin.js
Normal file
@@ -0,0 +1,194 @@
|
||||
/*
|
||||
* @file Audio plugin for CKEditor - fork from the Video plugin for CKEditor
|
||||
* Copyright (C) 2014 BeezNest Latino S.A.C
|
||||
*
|
||||
* == 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('audio', {
|
||||
// Translations, available at the end of this file, without extra requests
|
||||
lang: ['en', 'es'],
|
||||
getPlaceholderCss: function() {
|
||||
return 'img.cke_audio' +
|
||||
'{' +
|
||||
'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: 40px;' +
|
||||
'}';
|
||||
},
|
||||
onLoad: function() {
|
||||
// v4
|
||||
if (CKEDITOR.addCss)
|
||||
CKEDITOR.addCss(this.getPlaceholderCss());
|
||||
},
|
||||
init: function(editor) {
|
||||
var lang = editor.lang.audio;
|
||||
|
||||
// Check for CKEditor 3.5
|
||||
if (typeof editor.element.data == 'undefined') {
|
||||
alert('The "audio" plugin requires CKEditor 3.5 or newer');
|
||||
return;
|
||||
}
|
||||
|
||||
CKEDITOR.dialog.add('audio', this.path + 'dialogs/audio.js');
|
||||
|
||||
editor.addCommand('Audio', new CKEDITOR.dialogCommand('audio'));
|
||||
editor.ui.addButton('Audio', {
|
||||
label: lang.toolbar,
|
||||
command: 'Audio',
|
||||
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({
|
||||
audio: {
|
||||
label: lang.properties,
|
||||
command: 'Audio',
|
||||
group: 'flash'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
editor.on('doubleclick', function(evt) {
|
||||
var element = evt.data.element;
|
||||
|
||||
if (element.is('img') && element.data('cke-real-element-type') == 'audio') {
|
||||
evt.data.dialog = 'audio';
|
||||
}
|
||||
});
|
||||
|
||||
// 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') == 'audio') {
|
||||
return {audio: CKEDITOR.TRISTATE_OFF};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add special handling for these items
|
||||
CKEDITOR.dtd.$empty['cke:source'] = 1;
|
||||
CKEDITOR.dtd.$empty['source'] = 1;
|
||||
|
||||
editor.lang.fakeobjects.audio = 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 == 'audio') {
|
||||
realElement.name = 'cke:audio';
|
||||
|
||||
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_audio', 'audio', false),
|
||||
fakeStyle = fakeElement.attributes.style || '';
|
||||
|
||||
var width = realElement.attributes.width;
|
||||
|
||||
if (typeof width != 'undefined') {
|
||||
fakeElement.attributes.style = fakeStyle + 'width:' + CKEDITOR.tools.cssLength(width) + ';';
|
||||
}
|
||||
|
||||
return fakeElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
} // afterInit
|
||||
|
||||
}); // plugins.add
|
||||
|
||||
var en = {
|
||||
toolbar: 'Audio',
|
||||
dialogTitle: 'Audio properties',
|
||||
fakeObject: 'Audio',
|
||||
properties: 'Edit audio',
|
||||
widthRequired: 'Width field cannot be empty',
|
||||
heightRequired: 'Height field cannot be empty',
|
||||
sourceAudio: 'Source audio',
|
||||
sourceType: 'Audio type',
|
||||
linkTemplate: '<a href="%src%">%type%</a> ',
|
||||
fallbackTemplate: 'Your browser doesn\'t support audio.<br>Please download the file: %links%',
|
||||
autoPlay: 'Auto play'
|
||||
};
|
||||
|
||||
var es = {
|
||||
toolbar: 'Audio',
|
||||
dialogTitle: 'Propiedades de audio',
|
||||
fakeObject: 'Audio',
|
||||
properties: 'Editar el audio',
|
||||
widthRequired: 'La anchura no se puede dejar en blanco',
|
||||
heightRequired: 'La altura no se puede dejar en blanco',
|
||||
sourceAudio: 'Archivo de audio',
|
||||
sourceType: 'Tipo',
|
||||
linkTemplate: '<a href="%src%">%type%</a> ',
|
||||
fallbackTemplate: 'Su navegador no soporta AUDIO.<br>Por favor, descargue el fichero: %links%',
|
||||
autoPlay: 'Reproducir automáticamente'
|
||||
};
|
||||
|
||||
var fr = {
|
||||
toolbar: 'Audio',
|
||||
dialogTitle: 'Propriétés de l\'audio',
|
||||
fakeObject: 'Audio',
|
||||
properties: 'Editer l\'audio',
|
||||
widthRequired: 'La largeur ne peut être vide',
|
||||
heightRequired: 'La hauteur ne peut être vide',
|
||||
sourceAudio: 'Fichier audio',
|
||||
sourceType: 'Type',
|
||||
linkTemplate: '<a href="%src%">%type%</a> ',
|
||||
fallbackTemplate: 'Votre navigateur ne supporte pas l\'AUDIO.<br>Veuillez télécharger le fichier: %links%',
|
||||
autoPlay: 'Lecture automatique'
|
||||
};
|
||||
|
||||
// v3
|
||||
if (CKEDITOR.skins) {
|
||||
en = {audio: en};
|
||||
es = {audio: es};
|
||||
}
|
||||
|
||||
// Translations
|
||||
CKEDITOR.plugins.setLang('audio', 'en', en);
|
||||
|
||||
CKEDITOR.plugins.setLang('audio', 'es', es);
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user