TinyMCE с AJAX содержимым в клонированном JQuery диалоге пользовательского интерфейса - PullRequest
Новая
       212

TinyMCE с AJAX содержимым в клонированном JQuery диалоге пользовательского интерфейса

1 голос
/ 14 июля 2020

При первом открытии клонированного диалогового окна пользовательского интерфейса TinyMCE внутри диалогового окна загружается с содержимым: 

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

При закрытии и повторном открытии диалогового окна TinyMCE больше не загружается этим содержимым.

Есть идеи, что происходит и как исправить?

Я выполнил инструкции TinyMCE для интеграции с JQuery диалоговым окном пользовательского интерфейса 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);
                });
            }
        });
    }
});
})

См. Скрипт:

jsfiddle

Примечание: просто закройте предупреждения TinyMCE о том, что домен не зарегистрировано ...

1 Ответ

1 голос
/ 21 июля 2020

Проблема, с которой вы столкнулись, вызвана тем, что вы повторно используете тот же textarea DOM id.

Когда вы клонируете диалоговое окно, вам необходимо назначить новый идентификатор для текстового поля .

Рабочая скрипка

Пример: 

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