TinyMCE and pluploader do not work together

Question

I want to have a TinyMCE text environment instance and a pluplupload custom file loader on a web page. The problem is that in my Firefox 3.6 or Google Chrome they just don't work together. I checked with IE8 here, it works fine. I tried both versions of TinyMCE - standard and jQuery.

I tried debugging plupload initialization with FireBug (so tinymce was initialized first) and it started working. Then I tried setTimeout for 2 seconds on a call to initialize plupload and worked again.

This is a very strange behavior. Is this just my problem or has someone come across the same thing?

I am using jQuery 1.4.2, but I also checked with 1.3.2 - the same. Here is the javascript that I use to initialize these libraries:

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

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> 

and 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

I really tried to do the same. The problem I ran into using both of them is that each of them requires the form element to work (tinyMCE does not, but we need it with our implementation).

The workaround I came across was to put plupload in an iframe. This allows it to work with a separate page and resolve all conflicts that you encounter.

Answer 2

Have you tried this with putting textarea under the div? (due to positioning, calibration, and both tinymce and plupload with asynchronous code entry.)

Firstly, when plupload is triggered, it enters some html, depending on the runtime you choose, outside the button that you selected with the file select button. This html entered is located above the button so that the user does not notice the difference, and he does not need to make any additional button style that launches the file selection.

BUT, when you initialize tinymce after plupload, the html that enters the contents of Tinymce WYSIWYG is often higher than the text box that you are replacing. This discards the “graphical” plupload button, but not the actual button that initiates the file dialog box.

Instead of reordering the html, you may have a delay to initialize plupload or cause an update to plupload after tinymce has loaded.

Answer 3

I had the same problem in IE. There are tinyMCE and Plupload controls on my application page. But somehow, my Plupload control did not receive initialization. When I click the pickFiles button, nothing happens. So, I came across the following solution.

As shown in the code below, place your Plupload control inside the container (in this case, “Div”) and enter the identifier of this container (“container” in this case) as the value for the container parameter in the Plupload control 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. [ For IE ] The container mentioned in the above solution should not be hidden during page load.