Bonsoir à tous,
J'utilises [url=http://imperavi.com/redactor/]Redactor[/url] en éditeur visuel et j'ai fais un petit plugin pour ajouter une image dans mon éditeur de texte depuis une iframe (celle ci contient plupload et la liste des média).
Quand je clic sur une image depuis l'iframe j'ajoute l'image dans l'éditeur mais si je fais un upload avec plupload alors l'évènement n'est pas pris en compte car le dom est modifié, j'ai testé avec live() et on() mais rien n'y fais :/
Voici mon code plupload : (une fois le bind de FileUploaded j'ajoute dans le dom la structure html mais le click de mon plugin n'est pas pris en compte si l'élément vient d'être ajouté; voir le plugin plus bas)
[code]
var uploader = new plupload.Uploader({
runtimes : 'html5,flash',
containes: 'plupload',
browse_button: 'browse',
drop_element:"droparea",
url : urlUpload,
flash_swf_url: fallbackFlash,
multipart : true,
urlstream_upload:true,
max_file_size:'10mb',
//resize : {width:800, height:600, quality:90},
filters : [
{ title : 'Images', extensions : 'jpg,gif,png'}
]
});
uploader.bind('Init',function(up, params){
if(params.runtime != 'html5'){
$('#droparea').css('border','none').find('p,span').remove();
}
})
uploader.bind('UploadProgress',function(up, file){
//console.log(file);
$('#'+file.id).find('.bar').css('width',file.percent+'%');
})
uploader.init();
uploader.bind('FilesAdded',function(up,files){
var filelist = $('#filelist');
for(var i in files){
var file = files[i];
filelist.prepend('<div id="'+file.id+'" class="file">'+file.name+' ('+plupload.formatSize(file.size)+')'+'<div class="progress progress-striped active"><div class="bar"></div></div></div>');
}
$('#droparea').removeClass('hover')
uploader.start();
uploader.refresh();
});
uploader.bind('Error',function(up, err){
alert(err.message);
$('#droparea').removeClass('hover')
uploader.refresh();
});
uploader.bind('FileUploaded',function(up, file, response){
data = $.parseJSON(response.response);
var id = data.Media.id;
var alt = data.Media.name;
var img = '<img src="/uploads/'+data.Media.dir+''+data.Media.name+'" class="img" alt="'+alt.substr(0, alt.indexOf("."))+'">';
var str = '<div class="actions"><a href="/admin/medias/thumbnail/'+id+'">Image à la une</a> - <a href="'+id+'" class="del">Supprimer</a></div>';
$('#'+file.id).find('.progress').replaceWith(str);
$('#'+file.id).prepend(img);
console.log(file);
console.log(data);
});
jQuery(function($){
$('#droparea').bind({
dragover : function(e){
$(this).addClass('hover');
},
dragleave : function(e){
$(this).removeClass('hover');
}
});
$('.del').live('click',function(e){
e.preventDefault();
var elem = $(this);
var id = elem.attr('href');
if(confirm('Voulez vous vraiment supprimer cette image ?')){
$.get('/admin/medias/delete/'+id);
elem.parent().parent().slideUp();
}
return false;
});
//Bouton pour refresh la page car sinon pour ajouter l'image obligé de quitter l'iframe pour la rouvrir
$('.refresh').live('click', function(e) {
e.preventDefault();
document.location.reload();
});
});
[/code]
[code]
if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {};
RedactorPlugins.medias = {
init: function()
{
var self = this;
var btn = this.getBtn('image');
btn.click(function(){
$("#media").load(function() { //#media => id de l'iframe
var iframe = $(this);
var $file = iframe.contents().find('.file');
$file.on('click', 'img', function(event){ //event qui n'est pas pris en compte lors de l'upload
event.preventDefault();
var src = $(this).attr('src');
var alt = $(this).attr('alt');
self.insertContent(src, alt);
});
});
});
},
insertContent: function(src, alt) {
var img = '<img src="'+src+'" alt="'+alt.substr(0, alt.indexOf("."))+'">';
this.insertHtml(img);
//this.execCommand('insertHtml', img);
this.modalClose();
}
}
[/code]
Merci d'avance.