TinyMCE v6弹窗初始化后无法设置内容且编辑器失效求助

使用 TinyMCE v6 在弹窗中初始化编辑器，初始化后设置内容多数情况正常，但偶尔出现以下异常：

• 编辑器内容不显示，无法点击交互
• 字数统计数值正确，但插入内容时控制台报错
• 非弹窗场景下使用完全正常

初始化配置代码：

$(document).ready(()=>{
  tinymce.init({
            selector: "#editor",
            plugins: "quickbars image autoresize link autolink lists advlist visualblocks emoticons insertdatetime wordcount table",
            toolbar: 'mergeTagButton image | undo redo | formatgroup aligngroup numlist bullist | '
                + 'link emoticons | tablegroup',
            toolbar_groups: {
                formatgroup: {
                    icon: 'format',
                    tooltip: 'Formatting',
                    items: 'fontfamily fontsize bold italic underline strikethrough | forecolor backcolor | superscript subscript | removeformat'
                },
                tablegroup: {
                    icon: 'table',
                    tooltip: 'Table',
                    items: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
                },
                aligngroup: {
                    icon: 'paragraph',
                    tooltip: 'Paragraph format',
                    items: 'h1 h2 h3 | alignleft aligncenter alignright alignjustify | outdent indent'
                },
            },
            entity_encoding: 'raw',
            menubar: 'edit insert format table',
            quickbars_insert_toolbar: '',
            visualblocks_default_state: true,
            forced_root_block: 'div',
            image_caption: true,
            end_container_on_empty_block: true,
            min_height: 300
     })
     });

这类问题的核心原因是弹窗初始化时编辑器容器处于隐藏状态，导致TinyMCE无法正确完成DOM绑定、布局计算，进而引发交互失效。以下是针对性修复步骤：

1. 延迟初始化到弹窗完全显示后 #

不要在$(document).ready中直接初始化，改为监听弹窗的显示完成事件（以下以Bootstrap模态框为例，自定义弹窗需替换为对应框架的显示就绪事件）：

// 监听弹窗显示完成事件
$('#your-modal-id').on('shown.bs.modal', function () {
  tinymce.init({
    selector: "#editor",
    // 保留原配置项
    plugins: "quickbars image autoresize link autolink lists advlist visualblocks emoticons insertdatetime wordcount table",
    toolbar: 'mergeTagButton image | undo redo | formatgroup aligngroup numlist bullist | link emoticons | tablegroup',
    toolbar_groups: {
        formatgroup: {
            icon: 'format',
            tooltip: 'Formatting',
            items: 'fontfamily fontsize bold italic underline strikethrough | forecolor backcolor | superscript subscript | removeformat'
        },
        tablegroup: {
            icon: 'table',
            tooltip: 'Table',
            items: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
        },
        aligngroup: {
            icon: 'paragraph',
            tooltip: 'Paragraph format',
            items: 'h1 h2 h3 | alignleft aligncenter alignright alignjustify | outdent indent'
        },
    },
    entity_encoding: 'raw',
    menubar: 'edit insert format table',
    quickbars_insert_toolbar: '',
    visualblocks_default_state: true,
    forced_root_block: 'div',
    image_caption: true,
    end_container_on_empty_block: true,
    min_height: 300,
    // 初始化完成后再设置内容
    setup: function(editor) {
      editor.on('init', function() {
        editor.setContent('你的初始内容');
      });
    }
  });
});

// 弹窗关闭时销毁编辑器，避免重复初始化冲突
$('#your-modal-id').on('hidden.bs.modal', function () {
  tinymce.remove('#editor');
});

2. 修复动画导致的渲染延迟 #

若弹窗使用了transform、opacity等动画属性，可能导致TinyMCE渲染异常，可在初始化后强制刷新：

setup: function(editor) {
  editor.on('init', function() {
    editor.setContent('你的初始内容');
    // 延迟100ms确保布局稳定后刷新
    setTimeout(() => {
      editor.refresh();
    }, 100);
  });
}

3. 避免重复初始化 #

每次弹窗打开时仅初始化一次编辑器，关闭时销毁实例，防止DOM节点冲突和内存泄漏。

内容的提问来源于stack exchange，提问作者Safa Tunç