克隆的 JQuery UI 对话框中包含 AJAX 内容的 TinyMCE

Question

第一次打开克隆的 UI 对话框时，对话框内的 TinyMCE 加载内容：

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

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

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

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

<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);
                });
            }
        });
    }
});
})

参见fiddle：

jsfiddle

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

Answer 1

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

克隆对话框时，需要为文本区域分配新的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);
                    });
                }
            });
        }
    });
})

克隆的 JQuery UI 对话框中包含 AJAX 内容的 TinyMCE

TinyMCE with AJAX content in cloned JQuery UI Dialog

jquery

jquery-ui

tinymce

jquery-ui-dialog

tinymce-4