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

Question

Я хочу, чтобы на веб-странице был экземпляр пользовательских текстовых файлов TinyMCE и 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

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

Answer 3

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

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

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

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