TinyMCE e pluploader non funzionano insieme

Question

Desidero avere un'istanza di TinyMCE textarea e pluplupload uploader di file personalizzato sulla pagina web. Il problema è che nel mio Firefox 3.6 o Google Chrome semplicemente non funzionano insieme. Ho controllato con IE8 qui funziona bene. Ho provato entrambe le versioni di TinyMCE - lo standard e jQuery.

Ho provato a eseguire il debug dell'inizializzazione di plupload utilizzando FireBug (in modo che prima era inizializzato il processo di tinymce) e ha iniziato a funzionare. Poi ho provato a impostare Timeout per 2 secondi sulla chiamata per inizializzare il plupload e di nuovo ha funzionato.

Questo è un comportamento molto strano. È solo il mio problema o qualcuno ha incontrato lo stesso?

Io uso jQuery 1.4.2 ma ho anche verificato con 1.3.2 - lo stesso. Ecco il javascript che uso per inizializzare queste librerie:

$(function() { 
     var plUploader = new plupload.Uploader({ 
      runtimes: 'html5,flash,silverlight', 
      browse_button: 'pickfiles', 
      max_file_size: '10mb', 
      url: '<%= Url.Action<FilesController>(c => c.Upload()) %>', 
      resize: { width: 320, height: 240, quality: 90 }, 
      flash_swf_url: '/js/plupload/plupload.flash.swf', 
      silverlight_xap_url: '/js//plupload/plupload.silverlight.xap', 
      filters: [ 
      { title: "Image files", extensions: "jpg,gif,png" }, 
      { title: "Zip files", extensions: "zip" }] 
     }); 
     plUploader.bind('Init', function(up, params) { 
      $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>"); 
     }); 
     plUploader.bind('FilesAdded', function(up, files) { 
      $.each(files, function(i, file) { 
       $('#filelist').append(
        '<div id="' + file.id + '">' + 
        file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + 
        '</div>'); 
      }); 
     }); 
     plUploader.bind('UploadProgress', function(up, file) { 
      $('#' + file.id + " b").html(file.percent + "%"); 
     }); 
     $('#uploadfiles').click(function(e) { 
     plUploader.start(); 
      e.preventDefault(); 
     }); 
     plUploader.init(); 
     $('#Description').tinymce({ 
      // Location of TinyMCE script 
      script_url: '/js/tiny_mce/tiny_mce.js', 
      // General options 
      theme: 'simple', 
      language: 'pl' 
     }); 
    }); 

gli script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 


<script type="text/javascript" src="/js/tiny_mce/jquery.tinymce.js"></script> 

<script type="text/javascript" src="/js/plupload/source/plupload.js"></script> 
<script type="text/javascript" src="/js/plupload/source/plupload.silverlight.js"></script> 
<script type="text/javascript" src="/js/plupload/source/plupload.flash.js"></script> 
<script type="text/javascript" src="/js/plupload/source/plupload.html5.js"></script> 

e il codice HTML:

<textarea rows="2" name="Description" id="Description"></textarea> 
<div> 
    <div id="filelist">No runtime found.</div> 
    <br /> 
    <a id="pickfiles" href="#">[Select files]</a> 
    <a id="uploadfiles" href="#">[Upload files]</a> 
</div> 

Answer 1

ho effettivamente cercando di fare il stessa cosa. Il problema che ho incontrato usando entrambi è che richiedono un elemento del form per funzionare (tinyMCE non lo fa, ma ne abbiamo bisogno con la nostra implementazione).

La soluzione che mi è venuta in mente è stata la creazione di un plupload in un iframe. Ciò consente di operare su una pagina separata e può risolvere qualsiasi conflitto tu stia affrontando.

Answer 2

Hai provato a mettere la textarea sotto il div? (a causa del posizionamento, del ridimensionamento e di entrambi il flusso e il plupload che hanno l'iniezione asincrona del codice ..)

In primo luogo, quando viene avviato il plupload, inserisce in inject un html, a seconda del runtime scelto, al di fuori del pulsante impostato su essere il pulsante "seleziona i file". Questo html iniettato viene posizionato sopra il pulsante in modo che l'utente non noti una differenza e non deve eseguire alcuno stile aggiuntivo per il pulsante che attiva la selezione del file.

MA, quando si inizializza lo stagno dopo il caricamento di plupload, l'html che inietta il contenuto WYSIWYG di tinymce, è spesso più alto della textarea che si sta sostituendo. Ciò spinge verso il basso il pulsante "grafico" del plupload, ma non il pulsante effettivo che avvia la finestra di dialogo del file.

Invece di riorganizzare l'html, si potrebbe avere un ritardo per l'inizializzazione del plupload o chiamare un aggiornamento sul plupload dopo i carichi di tinymce.

Answer 3

Ho avuto lo stesso problema in IE. La mia pagina dell'applicazione ha entrambi i controlli tinyMCE e Plupload. Ma, in qualche modo il mio controllo di Plupload non è stato inizializzato. Quando clicco sul pulsante pickFiles, non succede nulla. Quindi, ho trovato la seguente soluzione.

Come mostrato nel seguente codice, posizionare il controllo Plupload all'interno di un contenitore ("Div" in questo caso) e passare l'ID di questo contenitore ("contenitore" in questo caso) come valore per l'opzione contenitore nel controllo Plupload configurazione.

<textarea rows="2" name="Description" id="Description"></textarea> 
<div id="container"> 
    <div id="filelist">No runtime found.</div> 
    <br /> 
    <a id="pickfiles" href="#">[Select files]</a> 
    <a id="uploadfiles" href="#">[Upload files]</a> 
</div> 

var plUploader = new plupload.Uploader({ 
       runtimes: 'html5,flash,silverlight', 
       browse_button: 'pickfiles', 
       container: 'container', 
      . 
      . 
      . 
     }); 

Nota: [Per IE] Il contenitore menzionato in soluzione di cui sopra non deve essere nascosto al momento della caricamento della pagina.