TinyMCE和pluploader没有一起工作

Question

我想在网页上有一个TinyMCE textarea和pluplupload自定义文件上传器的实例.问题是在我的Firefox 3.6或谷歌浏览器中他们只是不能一起工作.我在这里用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 中。这样做可以让它在单独的页面上运行，并可以解决您面临的任何冲突。