Javascript 为什么我的TinyMCE隐藏文本区出现问题？

我在一个网页上有大约7个

textarea

s，它们都是使用TinyMCE的富文本编辑器。但是，在页面加载时，其中只有1个可见，其余部分隐藏。用户可以单击“显示”链接，该链接将逐个显示剩余的文本区域

然而，我有一个奇怪的问题。所有

文本区域的设置如下所示：

<textarea cols="40" rows="20"></textarea>



但是，只有页面加载上显示的
textarea
才是我想要的完整大小。剩余的
textarea
s在我显示时非常小。所以我认为，可能它们没有呈现，因为它们隐藏在页面加载中

如何解决这个问题？
尝试向隐藏的文本区域添加一些CSS

例如，使用

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>



我想我遇到了这种情况，TinyMCE的CSS覆盖了一些默认的CSS行为。最后，我不得不“重新覆盖”它，并最终编辑了TinyMCE的css页面。
如果没有更多关于您的实际设置以及如何实现虚幻的显示/隐藏功能的细节，很难给出明确的答案。
不过，我可以提出一些一般性的想法：


在页面加载时不隐藏它们时，它们是否正确呈现？这将为bug发生的时间给出一个明确的答案
切换textarea视图时，能否同时明确设置行/列属性
你能使用css（可能带有！important）来设置文本区域的宽度和高度，而不是测试它是否有效果吗
我认为这是一个MCE缺陷，或者至少是MCE缺乏的一个功能

因为我想用CSS而不是HTML来设计我的输入框，所以我尝试了

而不是

display: none;

一切都恢复了正常

我相信后者会导致元素不占用任何空间，这会使检测元素宽度和高度的MCE代码失效。
使用jQuery加载TinyMCE时，此问题可以这样解决：

1-在文本区域中，在“内联样式”属性中指定高度：

<textarea style="height:200px;" class="tinymce" name="myfield"></textarea>

3-在TinyMcLoaded函数中设置编辑器的高度：

function tinymceLoaded(inst){
    // get the desired height of the editor
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0
    // Lets use the inline style text to solve this problem
    if(height == 0){
        height = $('#' + inst.editorId).css('height'); // 200px
        height = height.replace(/[^0-9]/g, "");    // remove all non-numeric characters to isolate the '200'
    }

    // set the height of the hidden TinyMCE editor
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}

从中，用户的回答帮助了我：

在取消隐藏包含的div之后，尝试调用tinyMCE.init（…）。
我也遇到过同样的问题，即转换为tinyMCE编辑器的隐藏textarea控件的高度太小。将
visibility
设置为
none
有效，但在其位置上留下了一个很大的空白

以下解决方案对我很有效：


请勿在页面加载时隐藏textarea控件
相反，请按如下方式设置TinyMCE的所有初始化配置：

tinyMCE.init({
...
初始化实例回调：“onInstanceInit”
});

在
onInstanceInit
函数中，动态隐藏初始化的TinyMCE编辑器
如果之后显示此编辑器，高度将再次正常，就像从未隐藏一样
隐藏的另一个原因是当您从dom中删除元素并初始化tinymce时。您需要首先从这个元素中删除tinymce，这样在初始化新的tinymce元素时就可以避免奇怪的行为

例如：

removelementwithtinymce=函数（elementToRemove）{
var parent=elementToRemove.parentNode；
tinymce.remove（elementToRemove.getAttribute（'id'）；
parent.removeChild（elementToRemove）；
};

就是这样。
如果您使用TinyMCE的生产版本，您可能忘记复制TinyMCE.min.js所需的文件夹。您需要将文件夹langs、插件、皮肤和主题与tinymce.min.js文件放在同一文件夹中。
我想我遇到了这个问题。textareas设置为display:none和TinyMCE似乎忽略了它们的大小，除非我在标记中正确指定它。
$('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'PATH_TO_TINYMCE.js',

    // General options ...
    // Theme options...

    // callback function
    init_instance_callback : "tinymceLoaded"
});

function tinymceLoaded(inst){
    // get the desired height of the editor
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0
    // Lets use the inline style text to solve this problem
    if(height == 0){
        height = $('#' + inst.editorId).css('height'); // 200px
        height = height.replace(/[^0-9]/g, "");    // remove all non-numeric characters to isolate the '200'
    }

    // set the height of the hidden TinyMCE editor
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}

tinyMCE.init({
        ...
        init_instance_callback : "onInstanceInit"
});