Modifier la hauteur de l'éditeur tinyMce dynamiquement

J'utilise tinymce éditeur dans ma page. Ce que je veux faire est de modifier la hauteur de l'éditeur de manière dynamique. J'ai créé une fonction:

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

mais qui ne fonctionne pas.
Mon textarea est

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

J'ai essayé toutes sortes de méthodes pour modifier la hauteur, mais ne pouvait pas venir à un règlement. Est-il quelque chose que je suis absent?

source d'informationauteur Ansh | 2012-03-06

  1. 14

    Vous pouvez redimensionner tinymce avec le resizeTo thème de la méthode:

       editorinstance.theme.resizeTo (width, height);

    La largeur et la hauteur de définir la nouvelle taille de la zone d'édition - je n'ai pas trouvé un moyen de déduire la taille supplémentaire de l'éditeur d'instance, de sorte que vous pouvez faire quelque chose comme ceci:

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

    Essayer:

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

    Pour changer la taille de façon dynamique dans votre code javascript:

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

    La suivante vient de cette autre SORTE de réponse que j'ai posté:

    Aucun des ci-dessus, ont travaillé pour moi en TinyMCE v4, donc ma solution a été de calculer la hauteur en fonction de la barre d'outils/barre de menu/barre d'état, puis réglez la hauteur de l'éditeur, à prendre les hauteurs en considération.

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

    Dans mon cas, je voulais la fenêtre de l'éditeur pour correspondre à la largeur et la hauteur de la réelle windowcar l'éditeur serait venu dans une fenêtre popup. Pour détecter les changements et de les redimensionner, j'ai mis cela à un rappel:

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

    C'est un peu tard mais pour les Googleurs comme moi, vérifiez les autoresize plugin 

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

    Options

    autoresize_min_height : Min hauteur de la valeur de l'éditeur lorsque l'auto est redimensionnée.

    autoresize_max_height : hauteur maximum de la valeur de l'éditeur lorsque l'auto est redimensionnée.

  5. 1

    Ce ManseUK déclaré est presque correct.
    La solution correcte est:

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

    ou dans votre cas 

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

    Mise à jour: c'est peut-être plus de ce que vous recherchez:

        //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. 0

    Au cas où quelqu'un le trouve et aussi veut changer le hauteur de l'éditeur de code source plugin.

    Vous avez besoin d'éditer le fichier suivant:

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

    Regarder dehors pour l'attribut appelé minHeigh et de l'ajuster à vos besoins. La hauteur vous définissez il n'est pas à la hauteur de l'ensemble de la zone, mais il n'est pas à la hauteur de la textarea. C'est quelque chose entre les deux.

  7. -1
     $(window).load(function () {

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

});