le point est que TinyMCE génère une iframe à la place du textarea, avec cet ID: originalID+"_ifr", et une table originalID+"_tbl" pour maintenir les contrôles et la zone d'édition.

pour faire la largeur du fluide:

document.getElementById(id+'_tbl').style.width='100%'

pour faire la hauteur du fluide:

Changement dinamically
C'est le script que j'utilise:

function toScreenHeight(id, minus) {
    var height;

    if (typeof(window.innerHeight) == "number") //non-IE
        height = window.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) //IE 6+ strict mode
        height = document.documentElement.clientHeight;
    else if (document.body && document.body.clientHeight) //IE 4 compatible / IE quirks mode
        height = document.body.clientHeight;

    document.getElementById(id).style.height = (height - minus) + "px";
}

Vous pouvez utiliser la appels de code et de fonction à l'intérieur onload et onresizebody événements.

dans tinymce 3.4.6, set

width:'100%'

l'option init résoudra le problème.

si vous faites des MCE minuscules dynamiquement via JS, vous pouvez courir dans les problèmes de timing où l'éditeur de MCE n'est pas encore disponible pour les ajustements de style. Pour combattre cela, vous pouvez utiliser un temps d'arrêt de l'ancienne école.

dans cet exemple, j'utilise un namespace" j " pour JQuery. Si votre éditeur est dans un fluide div qui change de taille, vous pouvez l'inclure dans un $(window).redimensionner(function() { }); auditeur.

setTimeout(function(){ 
  $j('.mceEditor').css('width','100%').css('minHeight','240px');
  $j('.mceLayout').css('width','100%').css('minHeight','240px');
  $j('.mceIframeContainer').css('width','100%').css('minHeight','240px');
  $j('#'+[INSERT TEXTAREA ID HERE]+'_ifr').css('width','100%').css('minHeight','240px');
},500) 

aucune des réponses ci-dessus ne fonctionnait pour moi dans TinyMCE v4, donc ma solution était de calculer la hauteur en se basant sur les barres d'outils/Barre de menu/barre d'état, puis de définir la hauteur de l'éditeur, en prenant ces 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 que la fenêtre de l'éditeur corresponde à la largeur et à la hauteur du window, puisque l'éditeur apparaîtrait dans un popup. Pour détecter les changements et redimensionner, je mets ceci à un rappel:

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

avec la version 4 et l'option d'utiliser la mise en page flexbox dans le navigateur j'ai fait ce qui suit pour obtenir une pleine largeur,l'expérience d'édition en hauteur de la div mère.

Il devrait être facile de mettre le css dans un fichier si vous préférez l'ajouter à vos styles existants.

var css = '.tinycme-full .mce-edit-area {display:flex;flex-flow:column;} .tinycme-full .mce-edit-area iframe {flex:1 1 auto;}  .tinycme-full {height:100%;} .tinycme-full .mce-tinymce.mce-container { width:100%;height:100%;border:0; } .tinycme-full .mce-panel{border:0} .tinycme-full .mce-container-body.mce-stack-layout {display: flex; flex-flow: column;height: 100%;} .tinycme-full .mce-stack-layout-item{  flex: 0 0 auto;} .tinycme-full .mce-edit-area{flex:1 1 auto;} ',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
    style.styleSheet["cssText"] = css;
} else {
    style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

L'idée est qu'il fait toutes les divs nécessaires prennent autant d'espace de colonne que nécessaire pour remplir le parent 100% et son fait en mettant un div autour de votre textarea: <div class="tinycme-full"> <textarea ... /></div>

Pas de jquery ou d'autres dépendances sont nécessaires et remplissent maintenant le parent à 100%.

j'ai eu le même problème, après avoir lu ce fil j'ai fini avec ce code

init_instance_callback: function (inst) { 
  setTimeout(function () {
    document.getElementById(inst.id + '_ifr').style.height= (document.getElementById("theContainerDiv").offsetHeight-85) + 'px';
   },1000);
},

je redimensionne l'élément " _ifm "au lieu de" _tbl", puisque redimensionner" _tbl " ne redimensionne pas la zone d'édition pour moi. Puis je laisse de l'espace pour la barre d'outils et la barre de statut en faisant les "_ifr" 85 pixels plus courts que le conteneur div.

j'ai dû utiliser setTimeout pour que ça marche, peut-être parce que j'ai une animation qui affiche l'élément conteneur.

SyCoDeR a raison mais j'ai suivi un chemin légèrement différent bien que probablement avec les mêmes résultats.

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 69px;
    bottom: 37px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

révisé parce que TinyMCE modifie les id avec des ajouts ou des suppressions menu/barre d'outils. Cela fonctionne peu importe ce que vous en faites.

le wrapper d'iframe (son ID fini par _ifr) est le premier parent de span qu'il a une application en tant que rôle . Ainsi, pour obtenir l'emballage:

$('span[role=application]').parents(':eq(0)')

Donc pour Redimensionner la hauteur:

$('[id$=_ifr]').css('height',$('span[role=application]').parents(':eq(0)').css('height'))

Pour redimensionner la largeur

$('[id$=_ifr]').css('width',$('span[role=application]').parents(':eq(0)').css('width'))

j'utilise une solution CSS pure pour y parvenir (tinyMCE 4.0.20).

1. Régler la hauteur de l'iframe à 100%:

   tinymce.initialisation({ hauteur: '100%' })

2. ajouter des styles à redimensionner automatiquement le conteneur iframe:

   .mce-tinymce { height: auto; width: 100%; position: absolute; left: 0; top: 0; bottom: 0; }

   .bq-éditeur .mce-conteneur-Caisse { hauteur: 100%; }

   .bq-éditeur .mce-edit-area { position: absolute; top: 57px; bottom: 0; width: 100%; height: auto; }

Remarque: j'ai une barre d'outils ligne et haut: 57px; dans .bq-éditeur .mce-modifier la zone est de la barre d'outils de rembourrage.

voici ma solution: (ajouté img max-width pour les images responsive)

initialisation

   setup: function(editor) { 
        editor.on('init', function (e) { 
            $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
            iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();            
            $("#editor_textarea_ifr").css("height",iframeHeight + 100);                     
        });             
    },

sur le nœud de changement (modifications)

  init_instance_callback: function (editor) {
    editor.on('NodeChange', function (e) {
      $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");               
      iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();              
      $("#editor_textarea_ifr").css("height",iframeHeight + 100);   
    });
}