Question

我在网页上有大约7 textarea个，所有这些都是使用TinyMCE的富文本编辑器。但是在页面加载时，只有其中一个是可见的，其余的都是隐藏的。用户可以单击“显示”链接，该链接将逐个显示剩余的textareas。

然而，我有一个奇怪的问题。所有textarea都设置如下：

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

但是，只有页面加载时显示的textarea是我想要的完整尺寸。当我展示它们时，其余的textarea非常小。所以我想也许它们不会被渲染，因为它们隐藏在页面加载上。

我该如何解决这个问题？

Answer 1

尝试将一些CSS添加到隐藏的textareas中。

例如，使用

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

我想我遇到了这个问题，TinyMCE的CSS会覆盖一些默认的CSS行为。我最终不得不“重新覆盖”它，并最终编辑了TinyMCE的CSS页面。

Answer 2

我认为这是一个MCE错误，或者至少是MCE缺乏的一个功能。

因为我想在CSS中设置输入框的样式，而不是HTML（yuck）我尝试了

visibility: hidden;

而不是

display: none;

一切都恢复了。

我相信后者导致元素不占用空间，这会占用MCE代码，该代码会检测元素的宽度和高度。

Answer 3

使用jQuery加载TinyMCE时，可以解决这个问题：

1-在您的textarea上，在内联样式属性中指定高度：

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

2-在实例化TinyMCE编辑器时添加回调函数。例如的 tinymceLoaded

$('textarea.tinymce').tinymce({ // Location of TinyMCE script script_url : 'PATH_TO_TINYMCE.js', // General options ... // Theme options... // callback function init_instance_callback : "tinymceLoaded" });

3-在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'}); }

Answer 4

如果没有关于实际设置的更多细节以及如何进行有趣的显示/隐藏功能，很难给出明确的答案。我可以提出一些一般性的想法：

当您在页面加载时不隐藏它们时，它们是否正确呈现？这将为错误发生的时间点提供一个明确的答案。
当您切换textarea的视图时，您可以明确地同时设置row / col属性吗？
你可以使用css（可能带有！important）来设置textarea的宽度和高度，而不是测试它是否有效？

Answer 5

来自TinyMCE inside hidden div are not displayed as enabled when we put the div visible，用户的slolife回答帮助了我：

在取消隐藏包含div后，尝试调用tinyMCE.init（...）。

Answer 6

我一直有同样的问题，隐藏的textarea控件转换为TinyMCE编辑器的高度太小。将visibility设置为none会有效，但会留下一个很大的空白区域。

以下解决方案对我有用：

最初不要在页面加载时隐藏textarea控件
相反，请按照以下步骤设置所有TinyMCE的init配置：

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

在onInstanceInit函数中，动态隐藏已初始化的TinyMCE编辑器
如果您之后显示此编辑器，高度将再次正常，就像它从未被隐藏一样

Answer 7

如果您使用TinyMCE的生产版本，您可能忘记复制tinymce.min.js需要的文件夹。您需要在与tinymce.min相同的文件夹中包含文件夹 langs ，插件，皮肤和主题。 js文件。

Answer 8

隐藏的东西的另一个原因是你从dom中删除了元素，并在其上初始化了tinymce。你需要先从这个元素中删除tinymce，这样你就可以在初始化新的tinymce元素时避免奇怪的行为。

例如：

removeElementWithTinymce = function(elementToRemove){ var parent = elementToRemove.parentNode; tinymce.remove(elementToRemove.getAttribute('id')); parent.removeChild(elementToRemove); };

就是这样。

为什么我的TinyMCE隐藏文本区域表现正常？

8 个答案: