CODEWITHSUNDEEP
javascriptjqueryfile-uploadtinymce
Maksymilian Majer
Maksymilian Majer

Reputation: 2956

TinyMCE and pluploader not working together

I want to have an instance of both TinyMCE textarea and pluplupload custom file uploader on on 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 - the standard and jQuery.

I tried debugging the initialization of plupload using FireBug (so that tinymce was initialized first) and it started to work. Then I tried to setTimeout for 2 seconds on the call to initialize plupload and again it worked.

This is very odd behavior. Is it only my issue or has anybody encountered the same?

I use jQuery 1.4.2 but I also checked with 1.3.2 - the same. Here is the javascript that I use to initialize those 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'
        });
    });

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

Upvotes: 6

Views: 3617

Answers (3)

Vishal
Vishal

Reputation: 21

I had same issue in IE. My application page has both tinyMCE and Plupload controls. But, somehow my Plupload control was not getting initiallized. When I click on pickFiles button, nothing was happening. So, I came across the following solution.

As shown in below code, place your Plupload control inside a container ("Div" in this case), and pass ID of this container ("container" in this case) as a value to the container option in 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 above solution should not be hidden at the time of page load.

Upvotes: 0

Mark
Mark

Reputation: 134

Have you tried it with putting the textarea below the div? (because of positioning, sizing, and both tinymce and plupload having asynchronous code injection..)

First, When plupload gets initiated, in injects some html, depending on which runtime you choose, outside of the button that you set to be the "select files" button. This injected html gets positioned above the button so the user doesn't notice a difference, and it doesn't have to do any additional styling to the button that triggers the file select.

BUT, when you initialize tinymce after plupload, the html that injects the tinymce WYSIWYG content, is often taller then the textarea you are replacing. This pushes down the "graphical" plupload button, but not the actual button that initiates the file dialog box.

Instead of rearranging your html, you could have a delay for you plupload initialization, or call a refresh on the plupload after tinymce loads.

Upvotes: 0

Maxx
Maxx

Reputation: 4082

I've actually been trying to do the same thing. The issue I ran into with using both of them is that they each require a form element to work (tinyMCE does not, but we need it to with our implementation).

The workaround I came up with for this was putting plupload in an iframe. Doing this allows it to operate off of a separate page and may resolve whatever conflicts you're facing.

Upvotes: 3

Related Questions