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.

回答1:

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.

回答2:

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,

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

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

回答4:

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

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

回答5:

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

回答6:

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>

回答7:

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?

回答8:

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.

回答9:

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

回答10:

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

回答11:

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

回答12:

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>

来源：https://stackoverflow.com/questions/6436934/tinymce-width-and-height-disobedient

标签

javascript

jquery

tinymce