Change tinyMce editor's height dynamically

问题:

I am using tinymce editor in my page. What I want to do is to change the height of the editor dynamically. I have created a function:

function setComposeTextareaHeight()
{
    $("#compose").height(200);
}

but that is not working. My textarea is

<textarea id="compose" cols="80" name="composeMailContent" style="width: 100%; height: 100%">

I have tried all sorts of methods for changing the height but could not come to a resolution. Is there any thing that i am missing?

回答1:

You can resize tinymce with the resizeTo theme method:

   editorinstance.theme.resizeTo (width, height);

The width and height set the new size of the editing area - I have not found a way to deduce the extra size of the editor instance, so you might want to do something like this:

   editorinstance.theme.resizeTo (new_width - 2, new_height - 32);

回答2:

Try:

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

To change size dynamically in your javascript code:

var resizeHeight = 350;
var resizeWidth = 450;
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'height', resizeHeight + 'px');
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'width', resizeWidth + 'px');

回答3:

The following comes in from this other SO answer I posted:

None of the above were working for me in TinyMCE v4, so my solution was to calculate the height based on the toolbars/menu bar/status bar, and then set the height of the editor, taking those heights into consideration.

function resizeEditor(myHeight) {
    window.console.log('resizeEditor');
    myEditor = getEditor();
    if (myEditor) {
        try {
            if (!myHeight) {            
                var targetHeight = window.innerHeight; // Change this to the height of your wrapper element
                var mce_bars_height = 0;
                $('.mce-toolbar, .mce-statusbar, .mce-menubar').each(function(){
                    mce_bars_height += $(this).height();
                });
                window.console.log('mce bars height total: '+mce_bars_height);                          
                myHeight = targetHeight - mce_bars_height - 8;  // the extra 8 is for margin added between the toolbars
            }
            window.console.log('resizeEditor: ', myHeight);
            myEditor.theme.resizeTo('100%', myHeight);  // sets the dimensions of the editable area
        }
        catch (err) {
        }
    }
}

In my case, I wanted the editor window to match the width and height of the actual window, since the editor would come up in a popup. To detect changes and resize, I set this to a callback:

window.onresize = function() {
    resizeEditor();
}

回答4:

It's a bit late but for Googler like me, check the autoresize plugin

tinymce.init({
    plugins: "autoresize"
});

Options

autoresize_min_height : Min height value of the editor when it auto resizes.

autoresize_max_height : Max height value of the editor when it auto resizes.

回答5:

What ManseUK stated is almost correct. The correct solution is:

$('#compose_ifr').height(200);

or in your case

$('#composeMailContent_ifr').height(200);

Update: maybe this is more what you are looking for:

    // resizes editoriframe
    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 = 200 + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = 200;
            }
            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:

In case someone finds this and also wants to change the height of the source code editor plugin.

You need to edit the following file:

\tiny_mce\plugins\code\plugin.min.js

Look out for the attribute called minHeigh and adjust it to your needs. The height you define there is not the height of the entire box, but it is not the height of the textarea either. It is something inbetween.

回答7:

I'm using tinymce 4.8.3.

I display the editor in a resizable modal dialog box.

I solved this using flexbox, shown here in SASS/SCSS:

// TinyMCE editor is inside a container something like this
.html-container {
    height: 100%;
    overflow: hidden;
}

.mce-tinymce {
    // This prevents the bottom border being clipped
    // May work with just 100%, I may have interference with other styles
    height: calc(100% - 2px);

    & > .mce-container-body {
        height: 100%;
        display: flex;
        flex-direction: column;

        & > .mce-edit-area {
            flex: 1;

            // This somehow prevents minimum height of iframe in Chrome
            // If we resize too small the iframe stops shrinking.
            height: 1px; 
        }
    }
}

When the editor is initialized we have to tell it to put 100% height on the IFRAME. In my case I also have to subtract 2px else the right border is clipped off:

tinymce.init({
    ...
    height: "100%",
    width: "calc(100% - 2px)"
});

回答8:

 $(window).load(function () {

$('#YourID_ifr').css('height', '550px');

});