Tinymce Width And Height Disobedient!

According to the (conflicting) documentation of TinyMCE, the editor takes on the size of the textarea (or other) element that it replaces. It also says that you can set the size of

Solution 1:

Its saves the last size because of the theme settings. You can turn it off by using the following

$('textarea.tinymce').tinymce({
    theme_advanced_resizing: true,
    theme_advanced_resizing_use_cookie : false,

Solution 2:

I know all about this, it is very annoying.

Adding this to any loaded CSS file fixed the width for me (I just put it in the global css, not in any of the TinyMCE css files, I did not test with height):

.mceEditor > table {
    width:/* my width */!important;
}

This would affect all instances, which was fine in my case. You can target the toolbar itself with .mceToolbar

You kind of do want TinyMCE to resize the textarea, so it can be wide enough to fit all the toolbar icons.

Solution 3:

Here is my fix. It works also for multiple instances of TinyMCE editors (init() with 'height' property works only for the first instance, so it's a workaround to achieve a fixed or minimum height of the editor box).

.mceEditortd.mceIframeContaineriframe {
    min-height: 350px!important;
}
.mceEditortable {
    height: auto !important;
}

Solution 4:

Although there are a lot of good suggestions here I found the answer by reading the question. There is NO problem with height or width so why all these work arounds with CSS or writing functions, the method in the docs works.

The original challenge was about resizing, the author never said the height or width didn't work, it just didn't do what he/she expected - it was only stated as quoted below:

"the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it."

Saidul Islam answered the question correctly and to take it one step further Stuart went on to describe how to turn off the cookies. If you need to set the height and width do it when in init() and be done. You can read more here:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

Sizing the input area in both height and width works as outlined below.

tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});

Solution 5:

tinyMCE.init({
        mode : "exact",
         .....

mode : "exact" will disable the ability to resize grid by drag