Question

我正在尝试将textarea附加到Shadowbox中存在的小表单中。从按钮调用Shadowbox：

<input type="button" value="Upload" onClick="uploadImageSB();">

调用Shadowbox的javascript编写如下：

<script type="text/javascript" src="../tribnet_2013/shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript">

        Shadowbox.init({

        });

        function uploadImageSB() {

            // shadowbox for image upload
            Shadowbox.open({
                content:    'http://mydomain.com/cgi-bin/photo.cgi',
                player:     'iframe',
                title:      'Image Upload',
                height:     200,
                width:      500,
                options: {
                    onOpen: function() {

                        var ed = tinymce.activeEditor;
                        var content = ed.save();

                        var ta = document.createElement('textarea');
                        ta.textContent = content;
                        ta.name = 'editor';
                        ta.value = ta.textContent;

                        var form = document.getElementById('photoForm');
                        form.appendChild(ta);
                    }
                }
            });

        };

    </script>

正如您所看到的，我也是从调用Shadowbox的同一页面抓取我的TinyMCE编辑器的内容（这部分工作正常）。

Shadowbox中的表单如下所示：

<form id="photoForm" enctype="multipart/form-data" name="photoForm" action="[% base_url %]/cgi-bin/photo.cgi" method="post" target="_parent">

    <table border="0" cellpadding="0" cellspacing="0">

        <tr><td colspan="4" style="height: 50px;"></td></tr>

        <tr>
            <td style="width: 25px;"></td>
            <td style="width: 175px;"><label>Image Name:</label></td>
            <td style="width: 275px;"><input type="text" name="image_name" size="20" maxlength="30"></td>
            <td style="width: 25px;"></td>
        </tr>

        <tr><td colspan="4" style="height: 20px;"></td></tr>

        <tr>
            <td style="width: 25px;"></td>
            <td style="width: 175px;"><label>Load Image:</label></td>
            <td style="width: 275px;"><input type="file" name="image_file" size="20"></td>
            <td style="width: 25px;"></td>
        </tr>

        <tr><td colspan="4" style="height: 20px;"></td></tr>

        <tr>
            <td style="width: 25px;"></td>
            <td style="width: 175px;"><label>Press Button to Upload:</td>
            <td style="width: 275px;"><input type="submit" value="Upload" name="upload"></td>
            <td style="width: 25px;"></td>
        </tr>

        <tr><td colspan="4" style="height: 20px;"></td></tr>

    </table>

    <input type="hidden" name="function" value="photo_upload_process">

</form>

阴影框中的表单也正常工作。请注意，我在表单标记中有一个target =“_ parent”。我不确定是不是......我认为这会阻止我的Shadowbox正常关闭（需要帮助）。

我想做的是......在我的内容变量中加上标记，然后......

1）动态创建名为“ta”的textarea 2）将内容放入ta中 3）将ta附加到Shadowbox中的表单 4）提交表格

一切都有效，除了追加。我尝试使用onOpen和onClose上的Shadowbox选项来做到这一点。它失败。 可能是因为表单位于iframe中！

我也尝试过处理iframe，但我无法让它工作。我以为我可以使用：

使Shadowbox对象成为包含iframe的页面的子对象

window.parent.Shadowbox.open({})

但我也无法让它发挥作用。我有点超出我的深度...真的很感激一些帮助：）

谢谢！

Answer 1

shadowbox的iframe ID为sb-player，因此您应该访问iframe内容。

纯javascript方法，

options: {
  onFinish: function() {
    var iframe = document.getElementById('sb-player');
    iframe.addEventListener("load", function() {
        var ed = tinymce.activeEditor; // get editor instance
        var content = ed.save(); // get the editor content
        var ta = document.createElement('textarea');
        ta.textContent = content;
        ta.name = 'editor';
        ta.value = ta.textContent;
        var iframeContent = this.contentDocument || this.contentWindow.document;
        var form = iframeContent.getElementById('photoForm');
        form.appendChild(ta);
    },true);

  }
}

如何将元素附加到Shadowbox内的表单

1 个答案: