TinyMCE et pluploader ne fonctionnent pas ensemble

Question

Je souhaite avoir une instance de la zone de texte TinyMCE et de l'utilitaire de téléchargement de fichier personnalisé pluplupload sur la page Web. Le problème est que dans mon Firefox 3.6 ou Google Chrome, ils ne fonctionnent pas ensemble. J'ai vérifié avec IE8 ici cela fonctionne très bien. J'ai essayé les deux versions de TinyMCE - le standard et jQuery.

J'ai essayé de déboguer l'initialisation de plupload en utilisant FireBug (de sorte que tinymce a été initialisé en premier) et il a commencé à fonctionner. Ensuite, j'ai essayé de réglerTimeout pendant 2 secondes sur l'appel pour initialiser plupload et à nouveau cela a fonctionné.

Ceci est un comportement très étrange. Est-ce seulement mon problème ou est-ce que quelqu'un a rencontré la même chose?

J'utilise jQuery 1.4.2 mais j'ai aussi vérifié avec 1.3.2 - pareil. Voici le javascript que j'utilise pour initialiser les bibliothèques:

$(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' 
     }); 
    }); 

les scripts:

<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> 

et le code 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

Je l'ai fait essayé de faire la même chose. Le problème que j'ai rencontré en utilisant les deux est qu'ils ont chacun besoin d'un élément de formulaire pour fonctionner (tinyMCE ne le fait pas, mais nous en avons besoin pour notre implémentation).

La solution de contournement que j'ai trouvée pour cela mettait plupload dans un iframe. Cela lui permet de fonctionner sur une page séparée et peut résoudre les conflits auxquels vous êtes confrontés.

Answer 2

Avez-vous essayé avec mettre le textarea ci-dessous le div? D'abord, quand le plupload est lancé, il injecte du code html, en fonction de l'exécution choisie, en dehors du bouton que vous avez défini. être le bouton "sélectionner les fichiers". Ce fichier html injecté est positionné au-dessus du bouton afin que l'utilisateur ne remarque pas de différence, et il n'a pas besoin d'ajouter de style au bouton qui déclenche la sélection du fichier. MAIS, quand vous initialisez tinymce après plupload, le html qui injecte le contenu WYSIWYG, est souvent plus grand que la zone de texte que vous remplacez. Cela pousse le bouton «graphique», mais pas le bouton qui initie la boîte de dialogue. Au lieu de réorganiser votre html, vous pouvez avoir un délai pour votre initialisation, ou appeler un rafraîchissement sur le plupload après le chargement complet.

Answer 3

J'ai eu le même problème dans IE. Ma page d'application contient les contrôles tinyMCE et Plupload. Mais, d'une manière ou d'une autre, mon contrôle Plupload n'était pas initialisé. Quand je clique sur le bouton pickFiles, rien ne se passait. Donc, je suis tombé sur la solution suivante. Comme indiqué dans le code ci-dessous, placez votre contrôle Plupload dans un conteneur ("Div" dans ce cas), et passez l'ID de ce conteneur ("conteneur" dans ce cas) comme valeur à l'option conteneur dans le contrôle Plupload configuration.

<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', 
      . 
      . 
      . 
     }); 

Note: [Pour IE] Le récipient mentionné en solution ci-dessus ne doit pas être caché au moment de chargement de la page.