CODEWITHSUNDEEP
htmlcsstinymce
user1943020
user1943020

Reputation:

How can I set the height of a tinymce text area?

I am using the following:

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

When the tinymce appears the height is just a few centimeters. How can I change the height of the default when it first appears?

Here is a list of the options I am using:

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'}

]

Upvotes: 11

Views: 34452

Answers (7)

gelevanog
gelevanog

Reputation: 146

For version 6 the following code should work

const wishedHeight = '100px'
// get `editor` from context of callbacks like `init`, `setup`, `loaded`, etc 
editor.editorContainer.style.height = wishedHeight;

Upvotes: 1

user9695282
user9695282

Reputation:

Add this css to your custom style sheet otherwise it will decrease all existing editors' height. 

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

Upvotes: 0

ctchuang
ctchuang

Reputation: 11

For global height setting for TinyMCE, edit settings.py of Django project:

TINYMCE_DEFAULT_CONFIG = {'height': 120}

For per-widget settings, use mce_attrs in form class:

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

Tested with django-tinymce 2.7.0.

Under the hood: You can see string like &quot;height&quot;: 120, in data-mce-conf attribute of the generated HTML for the textarea. Otherwise, something goes wrong.

Upvotes: 1

SoliQuiD
SoliQuiD

Reputation: 2193

from javascript

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

OR from html

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

Upvotes: 32

Hakan Fıstık
Hakan Fıstık

Reputation: 19421

for tinyMCE version before 4.X then this code is working

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

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

for tinyMCE version 4.X and after then this code is working

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

Upvotes: 2

Vadym
Vadym

Reputation: 1555

It works for me (see setTimeout part)

$(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);
    };
});

Upvotes: 0

David Jashi
David Jashi

Reputation: 4511

You should set height of container object in CSS:

#inputText {
    height : 10000000px;
}

Upvotes: 6

Related Questions