Jimbo
Jimbo

Reputation: 22974

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 the editor by specifying { height: '123', width: '123' } in the init method.

I have tried BOTH and still get only one result - the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it.

Upvotes: 29

Views: 43423

Answers (12)

user1946891
user1946891

Reputation: 955

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.tiny.cloud/docs/tinymce/latest/editor-size-options/#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
});

Upvotes: 2

Abdalla Arbab
Abdalla Arbab

Reputation: 1400

I am facing the same problem but I end up doing this

#tinymce-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}

Upvotes: 0

gpkamp
gpkamp

Reputation: 82

Add a 'body_id' using tinymce.init and then use that id in 'content_css' to give the editor the desired css behavior. Like so:

tinymce.init({
    selector: "textarea",
    content_css: '/css/app.css',
    body_id: 'new-journal-editor'
});

And then in app.css:

#new-journal-editor {
    height: 123px;
    width: 123px;
}

Upvotes: 0

Nick
Nick

Reputation: 19

I find the best method to restrict the width tinyMCE 4+ textarea is to wrap the textarea in a new div or span tag. Then apply the width to that. This way you get use percentage widths instead of fixed px. if you want to adjust height edit the rows="15" value.

example:

<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>

Upvotes: -1

Thariama
Thariama

Reputation: 50832

Yes, this is very annoying. I wrote my own function to adjust the height to the given input. You may modify it to set your height/width as you wish:

    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.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(';'));
        }
    },

Upvotes: 1

Commandrea
Commandrea

Reputation: 561

I found the TinyMCE text-area (called '.mceContentBody' in my theme) too small and awkwardly margined in the new post content area. In my theme there's a css file called editor-style. I changed the width (to 98%) yet since TinyMCE uses cookies to remember the editor size, the CSS changes weren't sticking. After CLEARING MY BROWSER'S CACHE, the CSS width/margin changes took effect. Finally. Gah.

Upvotes: 0

Stuart
Stuart

Reputation: 1237

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,

Upvotes: 31

Kamil Bednarz
Kamil Bednarz

Reputation: 778

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).

.mceEditor td.mceIframeContainer iframe {
    min-height: 350px !important;
}
.mceEditor table {
    height: auto !important;
}

Upvotes: 3

Gihan Lasita
Gihan Lasita

Reputation: 3053

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

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

Upvotes: 1

No Results Found
No Results Found

Reputation: 102745

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.

Upvotes: 20

danjah
danjah

Reputation: 3059

I noticed that a containing table was enforcing widths, and also the icon set are td's, so there's a minimum width they'll collapse down to, so if you have many icons in a single row - it could be messing all over your widths.

Sort of related SO question of mine, ended up being quite related to your problem: Able to float td elements consistently?

Upvotes: 0

Gihan Lasita
Gihan Lasita

Reputation: 3053

im setting width and height to editor area like this

<style>
#content{width: 620px; height: 500px;} 
</style>

<textarea name="content" id="content" cols="50" rows="15"></textarea>

Upvotes: 0

Related Questions