重新加载 AJAX 内容后禁用 TinyMCE

Question

我们已经将 TinyMCE 5 集成到我们的一个项目中，它让我感到困惑。我们其中一项的可编辑内容加载到 Bootstrap 4 模式对话框中。加载模态对话框后，为其中一个文本区域调用 tinyMCE：

tinyMCE.init( { selector: "textarea.tinymce",
                       theme: "silver",
                       width: "720",
                       menubar: false,
                       plugins: "spellchecker,image,paste,searchreplace,fullscreen,print,lists",
                       language: "de",
                       toolbar: "undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent | image | print"
                   } );

在模式 window 关闭之前，使用以下代码删除了 TinyMCE：

$('textarea.tinymce').each( function()
 {
  let mceItemID = $(this).attr('id');

     tinyMCE.execCommand('mceRemoveControl',true, mceItemID);
     tinymce.remove('#' + mceItemID);
  });

我们尝试过使用和不使用 execCommand，结果总是当模态 window 第二次打开时显示 TinyMCE 项目但没有任何内容。它也不可点击或聚焦。我们还需要做些什么才能让 TinyMCE 正确地重新初始化？谢谢

Answer 1

要正确地重新初始化编辑器：

使用 getContent()
与其尝试一个一个地删除 TinyMCE 项目，不如使用 destroy()
重新初始化
使用setContent()添加步骤1保存的内容。

Answer 2

诀窍是在创建模态对话框时异步调用 init 函数：在我现在使用的模态对话框的初始化函数中：

setTimeount( function() { tinyMCE.init( selector: 'textarea#' + mceItemID,..);}, 50 );

然后，当关闭模式 windows 我调用：

tinymce.remove( 'textarea#' + mceItemID );

现在我可以多次调用动态模态window。

重新加载 AJAX 内容后禁用 TinyMCE

TinyMCE disabled after reload of AJAX content

tinymce

modal-dialog

bootstrap-4

tinymce-5