TinyMCE и pluploader не работают вместе

Question

Я хочу, чтобы на веб-странице был экземпляр пользовательского загрузчика TinyMCE textarea и pluplupload. Проблема в том, что в моем Firefox 3.6 или Google Chrome они просто не работают вместе. Я проверил с IE8 здесь все работает нормально. Я попробовал обе версии TinyMCE - стандартную и jQuery.

Я попытался отладить инициализацию plupload с помощью FireBug (так, чтобы tinymce был инициализирован первым), и он начал работать. Затем я попытался установить время ожидания на 2 секунды при вызове для инициализации plupload, и снова все заработало.

Это очень странное поведение. Это только моя проблема или кто-нибудь сталкивался с таким же?

Я использую 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

Вы пробовали это, поместив текстовую область ниже div? (из-за позиционирования, определения размера, а также из-за асинхронного внедрения кода в tinymce и plupload...)

Во-первых, когда инициируется plupload, in вводит html, в зависимости от того, какое время выполнения вы выбираете, за пределами кнопки, которую вы установили в качестве кнопки "выбрать файлы". Этот внедренный HTML-файл располагается над кнопкой, поэтому пользователь не замечает разницы, и ему не нужно делать никаких дополнительных стилей для кнопки, которая вызывает выбор файла.

НО, когда вы инициализируете tinymce после plupload, html, который внедряет содержимое WYSIWYG tinymce, часто выше текстовой области, которую вы заменяете. Это приводит к нажатию "графической" кнопки загрузки, но не реальной кнопки, которая запускает диалоговое окно файла.

Вместо того, чтобы переставлять ваш html, вы можете иметь задержку инициализации загрузки или вызвать обновление загрузки после загрузки.

Answer 3

У меня была такая же проблема в IE. Моя страница приложения имеет элементы управления tinyMCE и Plupload. Но каким-то образом мой элемент управления Plupload не был инициализирован. Когда я нажимаю на кнопку pickFiles, ничего не происходит. Итак, я наткнулся на следующее решение.

Как показано в приведенном ниже коде, поместите элемент управления Plupload в контейнер (в данном случае "Div") и передайте идентификатор этого контейнера (в данном случае "контейнер") в качестве значения опции контейнера в конфигурации элемента управления 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] Контейнер, упомянутый в вышеупомянутом решении, не должен быть скрыт во время загрузки страницы.