动态创建tinymce编辑器

Question

我有一个包含许多选项卡的网络应用程序，每个选项卡包含一个文本区域（用于放置 tinymce 编辑器）。在页面底部，还有一个 table 网格，用户可以在其中 select 不同的文档 "models"。每个模型包含不同数量的选项卡（每个选项卡是文档中的一个 "title" 或主题）。我第一次加载页面时，所有选项卡都被加载，tinymce 编辑器也被渲染。但是当我点击网格中的一个项目并加载新选项卡时，tinymce 编辑器不再呈现。我的初始化函数是这样工作的：

tinymce.init({
    mode: "specific_textareas",
    editor_selector: "txt",
    ...
 });

我所有的文本区域都有这个 class (txt) 并且它们都是在函数执行之前创建的，但由于某种原因没有相应地创建编辑器。有人遇到过类似的问题吗？

Answer 1

我找到了解决此问题的方法，包括为每个选项卡创建一个新的 tinymce 编辑器实例，然后使用 "render" 函数使其显示在屏幕上。我将以下代码片段放入 "for" 循环中，该循环遍历页面上的所有选项卡：

   var ed = new tinymce.Editor(id, {
        mode: "specific_textareas",
        editor_selector: "txt",
        other_setting: "0"
    }, tinymce.EditorManager);

    ed.render();

动态创建tinymce编辑器

Create tinymce editors dynamically

javascript

tinymce

tinymce-4