在克隆的 JQuery UI 对话框中具有 AJAX 内容的 TinyMCE

Posted 2023-05-08

【中文标题】在克隆的 JQuery UI 对话框中具有 AJAX 内容的 TinyMCE

【英文标题】：TinyMCE with AJAX content in cloned JQuery UI Dialog

【发布时间】：2020-11-03 12:02:23

【问题描述】：

第一次打开克隆的 UI Dialog 时，Dialog 内的 TinyMCE 会加载内容：

 setup: function(editor) 
                    editor.on('init', function() 
                    var data = 'This is a test';
                    editor.setContent(data);
                    );
                  

关闭并重新打开对话框，TinyMCE 不再加载该内容。

知道发生了什么以及如何解决吗？

我已按照 TinyMCE 提供的说明与 https://www.tiny.cloud/docs/integrations/jquery/ 的 JQuery UI 对话框集成

<button type="button" id='show_dialog'>ShowDialog</button>

<div class="dialog_learning_event dialog_le">
<textarea name="editor_notes_le" id="editor_notes_le" rows="10" cols="80"></textarea>
<div id='notes_le_message'> </div>
</div>

和

  // Prevent jQuery UI dialog from blocking focusin
    $(document).on('focusin', function(e) 
      if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) 
        e.stopImmediatePropagation();
      
    );


$('#show_dialog').click(function()

var dialogs_le = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').dialog(
    title: 'test',
    width: '650',
    modal: true,
    dialogClass: 'dialogClass',
    open: function(event, ui) 
        var le_title = $(this).dialog("option", "title");
        tinymce.init(
            selector: 'textarea',
            menubar: false,
            plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
            toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
            content_style: "body font-size: 11pt; font-family: Arial; ",
            toolbar_mode: 'wrap',
            setup: function(editor) 
                editor.on('init', function() 
                var data = 'This is a test';
                editor.setContent(data);
                );
            
        );
    
);
)

见小提琴：

jsfiddle

注意：只需关闭有关未注册域的 TinyMCE 警告通知...

【参考方案1】：

您遇到的问题是由于您正在重复使用相同的textarea DOM id。

克隆对话框时，需要为 textarea 分配新的 ID。

Working fiddle

例子：

var dialogId = 0;

$('#show_dialog').click(function() 
    dialogId++;

    var modal = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').attr("id", "dialog_" + dialogId);
    modal.find("textarea").attr("id", "textarea_" + dialogId);

    modal.dialog(
        title: 'test',
        width: '650',
        modal: true,
        dialogClass: 'dialogClass',
        open: function(event, ui) 
            var le_title = $(this).dialog("option", "title");
            tinymce.init(
                selector: '#textarea_' + dialogId,  // use the new DOM id
                menubar: false,
                plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
                toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
                content_style: "body font-size: 11pt; font-family: Arial; ",
                toolbar_mode: 'wrap',
                setup: function(editor) 
                    editor.on('init', function() 
                        var data = 'This is a test: ' + dialogId;
                        editor.setContent(data);
                    );
                
            );
        
    );
)

【讨论】：

好的，谢谢。我没有在代码中使用任何 ID 来访问 textarea。所以我想我需要逐步访问 ID？

如果您使用页面检查器（浏览器开发者工具）查看，您可以看到，即使您关闭对话框，DOM 也不会被删除，而只是被隐藏了。因此，当您第二次打开对话框时，页面上有两个textarea，而TinyMCE 使用的textarea 选择器仍将引用第一个对话框（而不是第二个）。简而言之，是的，您需要生成唯一 ID 并使用 ID 引用元素