TinyMCE和pluploader不能一起工作

Question

我想在網頁上有一個TinyMCE textarea和pluplupload自定義文件上傳器的實例。問題是，在我的Firefox 3.6或谷歌瀏覽器，他們只是不能一起工作。我檢查了IE8在這裏工作正常。我嘗試了TinyMCE的兩個版本 - 標準版和jQuery。

我試着用FireBug調試plupload的初始化（所以tinymce被初始化）並且它開始工作。然後我嘗試在調用初始化plupload的時候設置Timeout 2秒，然後再次運行。

這是非常奇怪的行爲。這只是我的問題還是有人遇到過相同的問題？

我使用jQuery 1.4.2，但我也檢查與1.3.2 - 相同。 這裏是我用來初始化這些庫的JavaScript：

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

腳本：

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

和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

我其實一直在努力做的一樣。我在使用它們時遇到的問題是它們每個都需要一個表單元素才能工作（tinyMCE不需要，但我們需要它與我們的實現）。

我想出的解決方法是將plupload放入iframe中。這樣做可以讓它在單獨的頁面中運行，並可以解決您遇到的任何衝突。

Answer 2

你試過把textarea放在div下面嗎？ （因爲定位，尺寸大小以及tinymce和plupload具有異步代碼注入功能）。

首先，當啓動plupload時，根據您選擇的運行時間，注入一些html，並將其設置爲成爲「選擇文件」按鈕。這個注入的html被定位在按鈕的上方，所以用戶不會注意到區別，並且不必爲觸發文件選擇的按鈕做任何其他樣式。

但是，當您在plupload之後初始化tinymce時，注入tinymce所見即所得內容的html常常比您要替換的textarea更高。這將按下「圖形」plupload按鈕，但不是啓動文件對話框的實際按鈕。

而不是重新安排你的html，你可能會延遲你的plupload初始化，或者在tinymce加載後調用plupload刷新。

Answer 3

我在IE中遇到同樣的問題。我的應用程序頁面有tinyMCE和Plupload控件。但是，不知何故，我的Plupload控件沒有初始化。當我點擊pickFiles按鈕時，什麼都沒有發生。所以，我遇到了以下解決方案。

如下面的代碼所示，將Plupload控件放入一個容器（本例中爲「Div」），並將該容器的ID（在這種情況下爲「容器」）作爲值傳遞給Plupload控件中的容器選項組態。

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

注： [對於IE]在上述方案中提到的容器不應該在頁面負荷時隱藏。