如何设置 tinymce 文本区域的高度？答案

【问题标题】：How can I set the height of a tinymce text area?如何设置 tinymce 文本区域的高度？
【发布时间】：2013-07-23 13:21:06
【问题描述】：

我正在使用以下内容：

    <textarea
    data-ui-tinymce="tinymceOptions"
    data-ng-disabled="modal.action=='delete'"
    data-ng-model="modal.formData.text"
    id="inputText"
    rows="20"
    required></textarea>

当tinymce 出现时，高度只有几厘米。首次出现时如何更改默认值的高度？

这是我正在使用的选项列表：

selector: "textarea",           
plugins: [
                        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
                        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                        "table contextmenu template textcolor paste fullpage textcolor"
                ],

                toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect fontselect fontsizeselect",
                toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | code | inserttime preview | forecolor backcolor",
                toolbar3: "table | hr removeformat | subscript superscript | charmap | print fullscreen | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

                menubar: false,
                toolbar_items_size: 'small',

                templates: [
                        {title: 'Test template 1', content: 'Test 1'},
                        {title: 'Test template 2', content: 'Test 2'}

]

【问题讨论】：

你能在jsfiddle上模拟相同的（jsfiddle.net）或者添加屏幕截图，以便于理解:)

标签： html css tinymce

【解决方案1】：

来自 javascript

tinymce.init({
   selector: 'textarea',
   height: 200
});

或来自 html

<textarea style="height: 200px;">

【讨论】：

这应该是正确的答案，这解决了 Dan Robinson 在评论当前选择的答案时提到的问题
这对我有用，但我需要从配置中删除任何 autoresize 属性才能使其工作。

【解决方案2】：

你应该在 CSS 中设置容器对象的高度：

#inputText {
    height : 10000000px;
}

【讨论】：

忠告：如果在 tinyMCE 初始化脚本运行时 textarea 被隐藏，这将不起作用。（“隐藏”是指 textarea 或其祖先之一设置为“display: none”。）初始化时，tinyMCE 测量屏幕上 textarea 的高度，然后将其替换为 iframe 并赋予 iframe 相同的高度通过内联样式（“高度：300px”）。例如，如果您的 textarea 位于初始化编辑器时设置为“display: none”的模式窗口内，则 tinyMCE 会将 textarea 的高度测量为零，并且不会为 iframe 分配内联高度。跨度>

【解决方案3】：

对于 tinyMCE 版本 4.X 之前，此代码可以正常工作

tinyMCE.init({
    ...,
    setup: function(editor) {
        editor.onInit.add(function() {
            var width = editor.getWin().clientWidth;
            var height = 50;

            editor.theme.resizeTo(width, height);
        });
    }
});

对于 tinyMCE 版本 4.X 和之后那么这段代码可以工作

tinyMCE.init({
   setup: function (ed) {
      ed.on('init', function(args) {
         var id = ed.id;
         var height = 25;

         document.getElementById(id + '_ifr').style.height = height + 'px';
      });
   }
});

【讨论】：

【解决方案4】：

对于 TinyMCE 的全局高度设置，编辑 Django 项目的 settings.py：

TINYMCE_DEFAULT_CONFIG = {'height': 120}

对于每个小部件的设置，请在表单类中使用mce_attrs：

input = forms.CharField(widget=TinyMCE(mce_attrs={'height': 120}))

使用 django-tinymce 2.7.0 测试。

幕后：您可以在为 textarea 生成的 HTML 的 data-mce-conf 属性中看到类似 &quot;height&quot;: 120, 的字符串。否则会出问题。

【讨论】：

【解决方案5】：

它对我有用（参见 setTimeout 部分）

$(function () {
    window.init_tinymce = function (id, custom_config) {
        var textarea = $('#' + id);

        // Default TinyMCE configuration
        var basic_config = {
            mode: 'none',
            plugins: "link",
            menu: 'none',
            toolbar: 'bold | formatselect | link'
        };

        tinymce.init($.extend(basic_config, custom_config));
        ...

        setTimeout(function(){ //wait for tinymce to load
            console.log('timeout');
            $(tinymce.editors[0].iframeElement).contents().find('body')
                .css('min-height', $(tinymce.editors[0].contentAreaContainer).height() * .9);
        }, 1000);
    };
});

【讨论】：

【解决方案6】：

将此 css 添加到您的自定义样式表中，否则它将降低所有现有编辑器的高度。

.mce-edit-area iframe {
    max-height: 200px;
}

【讨论】：