TinyMCE và pluploader không hoạt động cùng nhau

Question

Tôi muốn có một phiên bản của cả hai văn bản TinyMCE và pluplupload trình tải lên tệp tùy chỉnh trên trang web. Vấn đề là trong Firefox 3.6 của tôi hoặc Google Chrome họ chỉ không làm việc cùng nhau. Tôi đã kiểm tra với IE8 ở đây nó hoạt động tốt. Tôi đã thử cả hai phiên bản TinyMCE - chuẩn và jQuery.

Tôi đã thử gỡ lỗi khởi tạo của plupload bằng FireBug (để tinymce được khởi tạo trước) và bắt đầu hoạt động. Sau đó, tôi đã cố gắng để setTimeout trong 2 giây trên cuộc gọi để khởi tạo plupload và một lần nữa nó làm việc.

Đây là hành vi rất kỳ quặc. Nó chỉ là vấn đề của tôi hay có ai gặp phải như vậy?

Tôi sử dụng jQuery 1.4.2 nhưng tôi cũng đã kiểm tra với 1.3.2 - giống nhau. Đây là javascript mà tôi sử dụng để khởi tạo các thư viện:

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

các kịch bản:

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

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

Tôi đã thực sự cố gắng để làm điều tương tự. Vấn đề tôi gặp phải khi sử dụng cả hai vấn đề là chúng yêu cầu một phần tử biểu mẫu để làm việc (tinyMCE không, nhưng chúng ta cần nó để thực hiện).

Cách giải quyết mà tôi đưa ra cho điều này là đặt plupload trong khung nội tuyến. Làm điều này cho phép nó hoạt động ngoài một trang riêng biệt và có thể giải quyết bất kỳ xung đột nào bạn đang gặp phải.

Answer 2

Bạn đã thử bằng cách đặt văn bản dưới div? (vì vị trí, kích thước, và cả hai thông tin và plupload có tiêm mã không đồng bộ ..)

Đầu tiên, khi plupload được bắt đầu, trong một số html, tùy thuộc vào thời gian bạn chọn, bên ngoài nút mà bạn đặt là nút "chọn tệp". Html được tiêm này được đặt ở trên nút để người dùng không nhận thấy sự khác biệt và nó không phải thực hiện bất kỳ kiểu dáng bổ sung nào cho nút kích hoạt tệp được chọn.

NHƯNG, khi bạn khởi tạo tinymce sau khi tải lên, html đưa nội dung WYSIWYG tinymce, thường cao hơn văn bản bạn đang thay thế. Điều này đẩy xuống nút plupload "đồ họa", nhưng không phải nút thực tế khởi tạo hộp thoại tập tin.

Thay vì sắp xếp lại html của bạn, bạn có thể có sự chậm trễ cho việc khởi tạo plupload hoặc gọi làm mới trên plupload sau khi tải tinymce.

Answer 3

Tôi gặp vấn đề tương tự trong IE. Trang ứng dụng của tôi có cả hai điều khiển tinyMCE và Plupload. Nhưng, bằng cách nào đó sự kiểm soát Plupload của tôi đã không được khởi xướng. Khi tôi bấm vào nút pickFiles, không có gì xảy ra. Vì vậy, tôi đã đi qua các giải pháp sau đây.

Như minh họa trong mã bên dưới, đặt điều khiển Plupload của bạn bên trong vùng chứa ("Div" trong trường hợp này) và chuyển ID của vùng chứa này ("vùng chứa" trong trường hợp này) làm giá trị cho tùy chọn vùng chứa trong điều khiển Plupload cấu hình.

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

Lưu ý: [Đối với IE] Container đề cập trong giải pháp trên không nên được ẩn tại thời điểm tải trang.