在具有灵活但最大高度的 div 中显示 tinymce 内容答案

【问题标题】：show tinymce contents in a div with flexible though maximum height在具有灵活但最大高度的 div 中显示 tinymce 内容
【发布时间】：2011-08-04 16:40:16
【问题描述】：

当使用像 tinymce 这样的编辑器时，我如何限制用户输入的文本的高度，这样它就不会在网页上占用比我想要的更多的空间？

有两件事我想提出一些建议：

在编辑器中： 用户在 tinymce 编辑器中输入文本，他可以将文本设置为字体大小，例如 80 像素，这将比普通字母占用更多空间。所以我关心的不是文字的数量，而是总数的高度。

在网页中： 我不想在页面上给他们超过 200px 的文字。但是，如果他们只输入 1 行小字体的文本，我不想显示 200 像素的空间。所以高度必须灵活但有最大值。

我知道这不是精确的科学，但这里的目标是防止用户弄乱页面。

【问题讨论】：

好问题。我没有得到答案，但如果您没有其他答案，请显示带有“溢出：隐藏”和最大所需高度的 tinymce。用户将自动知道最大高度是多少（因为在该高度之后他将看不到它的文本）并使用经典的 div 来显示具有 css max-height 属性和溢出的内容：隐藏

标签： html asp.net-mvc tinymce

【解决方案1】：

为了解决类似的问题，我编写了以下函数（放置在自己的 tinymce 插件中）。您将需要为最大情况添加一个变量，并且可能会对其进行一些调整，但我希望这段代码能让您进入正确的方向

    // this function will adjust the editors iframe height to fit in the editors content perfectly
    resizeIframe: function(editor) {
        var frameid = frameid ? frameid :editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = currentfr.Document.body.scrollHeight;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },

【讨论】：