【发布时间】：2022-01-22 20:33:52
【问题描述】：
我们已将 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"
} );
在模态窗口关闭之前 TinyMCE 被移除，代码如下：
$('textarea.tinymce').each( function()
{
let mceItemID = $(this).attr('id');
tinyMCE.execCommand('mceRemoveControl',true, mceItemID);
tinymce.remove('#' + mceItemID);
});
我们尝试了使用和不使用 execCommand，结果总是当模态窗口第二次打开时 TinyMCE 项目显示但没有任何内容。它也不可点击或聚焦。 我们还需要做什么才能让 TinyMCE 正确重新初始化？ 谢谢
【问题讨论】：
-
为什么不只是为不同的项目更改 TinyMCE 的内容，而不是一次又一次地重新创建和销毁它？或者你对不同的项目有不同的模式，每个项目都有不同的 textarea 元素？
-
谢谢悉达多，我想到了。问题是模态窗口的内容是通过 AJAX 从 django 应用程序中检索的。仅仅改变表单中的内容对象会很费力。我什至想过用其他东西替换 TinyMCE - 因为它似乎不起作用，但还没有找到好的替代方案。
-
当通过 ajax 加载数据时，您仍然将其放入 textarea（和其他字段）对吗？我只是对为什么需要重新创建编辑器感到困惑，什么时候它不会产生影响。
-
嗨 Sidddharth，用户可以在列表中编辑不同的记录详细信息。这将打开一个带有表单的模式窗口。该表单的 HTML 由服务器上的 python 应用程序生成。从服务器加载 HTML 后，我们调用一个 JavaScript 函数，该函数试图从其中一个文本区域中创建一个 TinyMCE 元素 - 这在第一次工作时有效，但对于后续调用则无效。
-
啊，所以表格是动态的，明白了。重新初始化 textarea 后，控制台中是否出现任何错误？
标签： bootstrap-4 modal-dialog tinymce tinymce-5