使用jQuery隐显含TinyMCE的表单后编辑器异常问题求助

TinyMCE在初始化时需要读取容器的可见尺寸来渲染工具栏和编辑器区域。你页面加载时就用$("#hidediv").hide()隐藏了容器，导致TinyMCE初始化时无法获取正确的布局参数，所以出现工具栏消失、错位的异常；而调整窗口大小会触发浏览器的重绘事件，TinyMCE会重新计算布局，因此恢复正常。

这里提供两种可行的修复方案：

方案1：延迟初始化TinyMCE，直到容器显示时再加载 #

把TinyMCE的初始化代码从页面加载时执行，改成点击显示按钮后再初始化（加判断避免重复初始化）：

<script>
$(function(){
    $("#hidediv").hide();
    $("#tiny").click(function(){
        $("#hidediv").show();
        // 检查编辑器是否已初始化，未初始化则加载
        if (!tinymce.get('your-editor-id')) {
            tinymce.init({
                selector: '#your-editor-id',
                // 你的其他TinyMCE配置项
            });
        }
    });
});
</script>

注意替换your-editor-id为你实际的文本字段ID

方案2：显示容器后触发TinyMCE重绘/调整尺寸 #

如果需要页面加载时就初始化TinyMCE，那在显示容器后主动调用TinyMCE的resize方法，强制它重新计算布局：

<script>
$(function(){
    $("#hidediv").hide();
    $("#tiny").click(function(){
        $("#hidediv").show();
        // 触发编辑器重绘，加小延迟确保容器已完全显示
        setTimeout(function(){
            const editor = tinymce.get('your-editor-id');
            if (editor) {
                editor.resize();
            }
        }, 100);
    });
});
</script>

同样替换your-editor-id为实际ID，延迟时间可根据实际情况调整

如果你的页面中有多个TinyMCE编辑器，可以用tinymce.editors.forEach(editor => editor.resize())来批量触发重绘。

内容的提问来源于stack exchange，提问作者JaY AR