9

我textarea在一个网页上大约有 7 个，它们都是使用 TinyMCE 的富文本编辑器。然而，在页面加载时，只有其中 1 个是可见的，其余的则隐藏起来。用户可以单击“显示”链接，该链接将一一显示剩余的文本区域。

但是，我有一个奇怪的问题。所有的textareas 都是这样设置的：

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

但是，只有textarea在页面加载时显示的是我想要的完整尺寸。当我展示它们时，剩余textarea的 s 真的很小。所以我在想也许它们没有被渲染，因为它们在页面加载时被隐藏了。

我该如何补救？

4

8 回答 8

7

尝试将一些 CSS 添加到隐藏的文本区域。

例如，使用

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

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

于 2009-03-26T11:08:10.103 回答
6

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

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

visibility: hidden;

代替

display: none;

一切都重新开始了。

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

于 2009-08-14T11:31:20.763 回答
2

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

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

<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'});
}
于 2010-09-16T21:42:36.883 回答
1

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

  • 当您不在页面加载时隐藏它们时它们是否正确呈现？这将为错误发生的时间点给出明确的答案。
  • 当您切换文本区域的视图时，您可以同时明确设置行/列属性吗？
  • 您可以使用 css（可能使用 !important）来设置 textarea 的宽度和高度，而不是测试它是否有效果吗？
于 2009-03-26T11:11:15.930 回答
1

当我们将 div 置于可见时，从TinyMCE 内部的隐藏 div 未显示为启用，用户的slolife回答帮助了我：

取消隐藏包含的 div 后尝试调用 tinyMCE.init(...)。

于 2012-03-12T16:45:23.150 回答
1

我遇到了同样的问题，即转换为 TinyMCE 编辑器的隐藏文本区域控件的高度太小。设置visibility为none工作，但在其位置留下了一个很大的空白空间。

以下解决方案对我来说效果很好：

  • 不要在页面加载时隐藏你的 textarea 控件
  • 相反，将所有 TinyMCE 的初始化配置设置如下：
tinyMCE.init({
        ...
        init_instance_callback ：“onInstanceInit”
});
  • 在您的onInstanceInit函数中，动态隐藏初始化的 TinyMCE 编辑器
  • 如果你之后显示这个编辑器，高度将再次正常，就像它从未隐藏过一样
于 2012-07-15T11:11:17.583 回答
1

如果您使用 TinyMCE 的生产版本，您可能忘记复制 tinymce.min.js 需要的文件夹。您需要在 tinymce.min.js 文件所在的文件夹中包含文件夹langs 、 plugins 、 skins和theme 。

于 2015-02-20T19:51:13.593 回答
0

隐藏的另一个原因是当您从 dom 中删除元素时初始化 tinymce。您需要先从该元素中删除 tinymce，这样您在初始化新的 tinymce 元素时会避免出现奇怪的行为。

例如：

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

就是这样。

于 2014-11-20T11:39:06.277 回答