javascript - TinyMCE 和 pluploader 不能一起工作

Question

我想在网页上同时拥有 TinyMCE textarea 和 pluplupload 自定义文件 uploader 的实例。问题是在我的 Firefox 3.6 或 Google Chrome 中它们不能一起工作。我在这里检查了 IE8，它工作正常。我尝试了两个版本的 TinyMCE - 标准版和 jQuery。

我尝试使用 FireBug 调试 plupload 的初始化(以便首先初始化 tinymce)并且它开始工作。然后我尝试在初始化 plupload 的调用中将 setTimeout 设置 2 秒，然后再次成功。

这是非常奇怪的行为。这只是我的问题还是有人遇到过同样的问题？

我使用 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 中。这样做允许它在单独的页面上运行，并且可以解决您面临的任何冲突。