web-dev-qa-db-fra.com

Comment redimensionner automatiquement tinyMCE?

J'ai un TinyMCE qui est défini sur une zone de texte, et je veux que cette zone de l'éditeur occupe tout l'espace de sa div parente.

J'ai une fonction JS qui récupère l'espace actuel et définit textarea.style.height, mais lorsque j'active TinyMCE, elle semble ne plus fonctionner.

En outre, la zone de texte a une largeur de 100%; il ne redimensionne pas par rendu HTML lorsqu'il utilise aussi TinyMCE.

Des idées?

javascripthtmlresizetinymceautoresize
31
igorsantos07

De nos jours, vous devriez utiliser le plugin autoresize fourni avec tinyMCE. Vous devrez appeler tinyMCE comme ceci (version jQuery):

$('.tinymce').tinymce({
  theme : 'advanced',
  plugins : 'autoresize',
  width: '100%',
  height: 400,
  autoresize_min_height: 400,
  autoresize_max_height: 800,
});

J'ai fait l'expérience qu'il peut être utile d'appeler manuellement le redimensionnement dans le init_instance_callback pour fournir la hauteur correcte sur init. Ajoutez ce paramètre aux options passées, si vous en avez besoin:

init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }
49
bfncs

Le fait est que TinyMCE génère une iframe à la place de la zone de texte, avec cet ID: originalID + "_ ifr", et une table originalID + "_ tbl" pour contenir les contrôles et la zone d'édition.

Pour rendre la largeur du fluide:

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


Pour rendre la hauteur du fluide:

Remplacez document.getElementById(id+'_ifr').style.height par une fonction dynamique en sélectionnant la hauteur souhaitée, via JS.
Voici le script que j'utilise pour cela:

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 les appels de code et de fonction dans les événements onload et onresizebody.

14
igorsantos07

en tinymce 3.4.6, set 

width:'100%'

dans l'option init va résoudre le problème.

9
ZHAO Xudong

Aucune de ces solutions ne fonctionnait pour moi dans TinyMCE v4; ma solution consistait donc à calculer la hauteur en fonction de la barre d'outils/barre de menu/barre d'état, puis à définir la hauteur de l'éditeur en tenant compte de ces hauteurs.

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 d'édition corresponde à la largeur et à la hauteur de la variable window réelle, car l'éditeur apparaîtrait dans une fenêtre contextuelle. Pour détecter les modifications et redimensionner, j'ai défini ceci sur un rappel:

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

Si vous effectuez de petites opérations MCE de manière dynamique via JS, vous pouvez rencontrer des problèmes de synchronisation pour lesquels l'éditeur MCE n'est pas encore disponible pour les ajustements de style. Pour lutter contre cela, vous pouvez utiliser un timeout old school.

Dans cet exemple, j'utilise un espace de noms "j" pour JQuery. Si votre éditeur est dans un div fluide qui change de taille, vous pouvez inclure ceci dans une $ (fenêtre) .resize (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)
3
Noel Baron

Avec la version 4 et l'option d'utiliser la disposition flexbox dans le navigateur, j'ai suivi les instructions ci-dessous pour obtenir une expérience de modification de la largeur et de la hauteur de la div parente.

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 de faire en sorte que tous les divs nécessaires occupent autant d'espace de colonne que nécessaire pour remplir le parent à 100% et c'est fait en plaçant un div autour de votre zone de texte: <div class="tinycme-full"> <textarea ... /></div>

Aucune requête ou autre dépendance n'est nécessaire et remplit maintenant le parent à 100% .enter image description here

2
Poul K. Sørensen

SyCoDeR a raison, mais j’ai suivi un chemin légèrement différent, 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ée car TinyMCE modifie l'ID avec des ajouts ou des suppressions de menus/barres d'outils. Cela fonctionne peu importe ce que vous en faites.

1
liquibyte

J'ai eu le même problème, après avoir lu ce fil, je me suis retrouvé 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", car le redimensionnement de "_tbl" ne m'a pas redimensionné la zone d'édition. Ensuite, je laisse un peu d’espace pour la barre d’outils et la barre d’état en raccourcissant le "_ifr" de 85 pixels de plus que le conteneur div. 

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

1
emmanuel2004

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

  1. Définissez la hauteur de l'iframe sur 100%:

    tinymce.init ({ height: '100%' })

  2. Ajoutez des styles au conteneur iframe à redimensionnement automatique:

    .mce-tinymce {height: auto; largeur: 100%; position: absolue; gauche: 0; en haut: 0; en bas: 0; }

    .bq-editor .mce-container-body {hauteur: 100%; }

    .bq-editor .mce-edit-area {position: absolute; en haut: 57px; en bas: 0; largeur: 100%; hauteur: auto; }

Note: J'ai une ligne de barre d’outils, et en haut: 57px; dans .bq-editor .mce-edit-area est un remplissage de barre d’outils.

0
SyCoDeR

Aucune de ces solutions ne fonctionnait à 100% pour moi. J'avais besoin de la hauteur pour ajuster l'initialisation et les modifications. Ce que j'ai fait est de saisir la hauteur de l'élément HTML dans l'iFrame, puis de lui appliquer une hauteur supplémentaire de 100 pixels.

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

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

lors du changement de noeud (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);   
    });
}
0
DobotJr

L'encapsuleur d'iframe (son ID terminé par _ifr) est le premier parent d'étendue auquel il a pour application. Ainsi, pour obtenir le wrapper: 

$('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'))
0
Abdennour TOUMI