单击 table 单元格时，如何让 JQuery 版本的 tinyMCE 在弹出窗口中打开多个文本区域？

Question

好的，所以我正在尝试创建一个模板，该模板将用于以相同的格式为多个场景提供信息。为此，我设置了一个 table 来显示信息，当您单击其中一个单元格（具体来说）时，它会将内部 HTML 放入文本区域出现在 jQuery 模态对话框中。然后将此文本区域转换为 TinyMCE 实例以进行编辑（使用 Tiny MCE javascript 版本 4.3.2）。但是，使用我当前的代码，这只在第一次有效。之后，无论单击哪个单元格，我都会看到一个显示为空的弹出窗口，尽管当我运行检查元素时它里面有正确的 HTML。

我在之前的问题中看到过类似的事情，但其中一个只想使用 jQuery 让弹出窗口工作，我已经做到了，而另一个没有使用 jQuery 版本，并且解决方案代码不适用于此版本，但它似乎只是在对话框关闭时关闭了实例，以便可以在下一个文本区域重做。此外，我正在使用自定义 CSS 外观，但 jQuery 启动方案是最接近的可用方案，如果您希望它在您进行故障排除时看起来漂亮的话。

编辑：澄清一下，我并不是要同时打开多个运行，它们应该一次打开一个。

代码：

<head>
    <script src="assetts/jquery-1.10.2.js"></script>
    <script src="assetts/jquery-ui.min.js"></script>
    <script src="tinymce/js/tinymce/jquery.tinymce.min.js"></script>
    <script src="tinymce/js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
        $(window).load(function () {                
            $('td').click(function (event) {
                var currentId = this.id; 
                var currentHTML = this.innerHTML;
                alert(currentId); 
                $(function () { 
                    $("<div id=\"editmodal-diag\"></div>").dialog({
                        title: 'Edit',
                        modal: true,
                        buttons: {
                            Ok: function () {
                                var t = "#" + currentId; 
                                alert(t); 
                                $(this).dialog("close"); $("#editmodal-diag").remove(); 
                                tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text'); 
                            },
                            Cancel: function () {
                                $(this).dialog("close"); $("#editmodal-diag").remove(); 
                                tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text'); 
                            }
                        }
                    });
                })
                $('#editmodal-diag').append("<textarea id=\"editmodal-diag-text\">" + currentHTML + "</textarea>"); 
                $('#editmodal-diag-text').empty; 
                $('#editmodal-diag-text').tinymce({ plugins: 'link' }); 
        });
    </script>
</head>
<body>
    <table width="75%>
        <tr>
            <th>Header text</th>
        </tr>
        <tr>
            <td>Information panel 1</td>
            <td>Information panel 2</td>
        </tr>
    </table>
</body>

提前致谢。

Answer 1

经过更多挖掘，我发现 TinyMCE 4 - remove() or destroy()，其中我发现需要删除 tinymce 控件：

tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();

在通过以下方式重新初始化之前完全删除当前编辑器：

tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link'});

这只需要在第一个盒子出现后就可以完成。我使用了一个布尔变量来检查这个。完整功能：

var tinyRun = false;
$(window).load(function () {
    setTimeout(function () {
        $('td').click(function (event) {
            var currentId = this.id; 
            var currentHTML = this.innerHTML;
            alert(currentId); 
            $(function () { 
                $("<div id=\"editmodal-diag\"><textarea id=\"editmodal-diag-text\"></textarea></div>").dialog({
                    title: 'Edit',
                    modal: true,
                    buttons: {
                        Ok: function () {
                            var t = "#" + currentId; 
                            alert(t); 
                            $(this).dialog("close"); $("#editmodal-diag").remove(); 
                            tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
                            tinymce.remove();
                        },
                        Cancel: function () {
                            $(this).dialog("close"); $("#editmodal-diag").remove(); 
                            tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
                            tinymce.remove();
                        }
                    }
                });
            })
            setTimeout(function () {
                $('#editmodal-diag-text').text(currentHTML);
                if (!tinyRun) {
                    $('#editmodal-diag-text').tinymce({ plugins: 'link' });
                    tinyRun = true;
                }
                else {
                    tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
                    $('#editmodal-diag-text').tinymce({ plugins: 'link' });
                }
            }, 250);
        });
    }, 250);
}

单击 table 单元格时，如何让 JQuery 版本的 tinyMCE 在弹出窗口中打开多个文本区域？

How to have the JQuery version of tinyMCE open multiple text areas in popups when clicking on a table cell?

html

javascript

jquery

tinymce-4