ReferenceError: FileBrowserDialogue is not defined
Bonjour à tous,
j’essaie d'intégrer un script qui a pour but de récupérer le lien d'un vidéo dans un dossier de mon api, coté serveur. j'ai accès à cette liste par le bouton parcourir du média vidéo de tinymce. j’accède donc à ma liste des vidéos contenus dans un dossier uploads, via un po up. Normalement, lorsque la vidéo est sélectionnée, le pop up dois se refermer, et je dois retrouver le le lien dans le champs de saisie: URL.
J'ai donc un message d'erreur dans ma console: ReferenceError: FileBrowserDialogue is not defined.
voici les codes contenus dans mes deux fichiers.
index.php
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
elements : "elm1",
theme : "advanced",
//language : "fr",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,|,formatselect,bullist,undo,redo,|,link,unlink,image,code,preview,tablecontrols,media",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
// Skin options
file_browser_callback:'fileBrowser'
});
function fileBrowser(field_name, url, type, win){
tinyMCE.activeEditor.windowManager.open({
file:'select_gallerie.php',
title: 'Gallerie',
width: '420',
height: '400',
resizable: 'yes',
inline: 'yes',
close_previous: 'no',
},{
window: win,
input: field_name
});
return false;
}
</script>
<div>
<textarea id="elm2" name="contenu" rows="25" cols="80" style="width: 500px">
</textarea>
</div>
<script type="text/javascript">
if (document.location.protocol == 'file:') {
alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver.");
}
</script>
</body>
</html>
select_gallerie.php
<html>
<head>
<style>
#plupload {
font-family: Arial,Helvetica;
color: #AAA; }
#plupload #droparea {
background-color:#fff;
border: 4px dashed #aaa;
height: 200px;
text-align: center;
font-size: 13px; }
#plupload #droparea p {
margin: 0;
padding: 60px 0 0 0;
font-weight: bold;
font-size: 20px; }
#plupload #droparea span {
display: block;
margin-bottom: 6px; }
#plupload #droparea.hover {
border-color: #83b4d8; }
#plupload #browse {
border: 1px solid #BBB;
text-decoration: none;
padding: 3px 8px;
color: #464646;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f4f4f4));
background-image: -webkit-linear-gradient(top, #ffffff, #f4f4f4);
background-image: -moz-linear-gradient(top, #ffffff, #f4f4f4);
background-image: -o-linear-gradient(top, #ffffff, #f4f4f4);
background-image: -ms-linear-gradient(top, #ffffff, #f4f4f4);
background-image: linear-gradient(top, #ffffff, #f4f4f4);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px; }
#plupload #filelist {
margin-top: 10px; }
#plupload #filelist .file {
background-color:#fff;
text-align:left;
padding: 0 10px;
border: 1px solid #aaa;
height: 70px;
line-height: 70px;
margin-bottom: 1px;
position: relative; }
#plupload #filelist .file:hover {
background-color:#eee;
}
#plupload #filelist img {
margin-right: 10px;
height: 55px;
vertical-align: middle; }
#plupload #filelist .actions {
position: absolute;
top: 0px;
right: 5px; }
#plupload #filelist .del {
margin-right:20px;
color: #FF0000; }
#plupload #filelist .progressbar {
position: absolute;
top: 25px;
right: 5px;
width: 150px;
height: 20px;
background-color: #abb2bc;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
-o-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5); }
#plupload #filelist .progress {
position: absolute;
border: 1px solid #4c8932;
height: 18px;
width: 10%;
background: url(progress.jpg) repeat;
-webkit-animation: progress 2s linear infinite;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px; }
@-webkit-keyframes progress {
from {
background-position: 0 0; }
to {
background-position: 54px 0; } }
</style>
</head>
<body >
<div id="plupload">
<p class="types2">Liste des vidéos</p>
<div id="filelist">
<?php
$d=dir("uploads");
while($entry=$d->read()){
if($entry!='.'&&$entry!='..'){
?>
<div class="file">
<a href="#" onclick="FileBrowserDialogue.sendURL("<?php echo ('uploads/'.$entry); ?>")">
<?php echo $entry; ?>
</a>
</div>
<?php
}
}
$d->close();
?>
</div>
</div>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce_popup.js"></script>
<script type="text/javascript">
var FileBrowserDialogue = {
init : function () {
// Here goes your code for setting your custom things onLoad.
},
sendURL : function (URL) {
var win = tinyMCEPopup.getWindowArg("window");
// insert information now
win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = URL;
// are we an image browser
if (typeof(win.ImageDialog) != "undefined") {
// we are, so update image dimensions...
if (win.ImageDialog.getImageData)
win.ImageDialog.getImageData();
// ... and preview if necessary
if (win.ImageDialog.showPreviewImage)
win.ImageDialog.showPreviewImage(URL);
}
// close popup window
tinyMCEPopup.close();
}
}
tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
</script>
</body>
</html>
J'ai récupéré ce code dans un tuto, mais j'y ai apporté quelques modifications.
Veuillez tenir compte du fait que je suis novice ne javascript, et un peu moins en php. Et sachez que j'ai bien essayé de trouver la solution par moi même, mais sans résultats.
Merci par avance.
Enjoy
