Comment tinyMCE automatique de redimensionnement?

Question

J'ai un TinyMCE qui est fixé sur une TextArea, et je veux que ce secteur de l'éditeur de tout l'espace et occuper de sa div parent, tout le temps.

J'ai une fonction JS qui ont l'espace et définir les textarea.style.height à lui, mais quand je TinyMCE permet il semble cesser de fonctionner.

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

Toutes les idées?

Answer 1

De nos jours, vous devez utiliser le plugin autoresize qui vient avec tinyMCE. Vous devrez appeler tinyMCE comme celui-ci (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 bonne hauteur sur initialisation. Ajoutez ce paramètre aux options passées, si vous avez besoin ceci:

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

Answer 2

Le point est que TinyMCE génère un iframe à la place de la zone de texte, avec cette ID: originalID + "_ ifr", et une table originalID + "_ TBL" pour maintenir les commandes et la zone de l'éditeur

.

Pour largeur fluide:

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

Pour hauteur du fluide:

Changement dinamically document.getElementById(id+'_ifr').style.height à la hauteur souhaitée, par JS.
Voici le script que je 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 le code et la fonction des appels à l'intérieur des événements onload onresize et body.

Answer 3

dans tinymce 3.4.6, définir

width:'100%'

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

Answer 4

Si vous faites dynamiquement via minuscule JS MCE, vous pouvez rencontrer des problèmes de synchronisation où l'éditeur de MCE n'est pas encore disponible pour les ajustements de style. Pour lutter contre cela, vous pouvez utiliser un ancien délai d'attente de l'école.

Dans cet exemple, je suis sur un espace de noms « j » pour JQuery. Si votre éditeur est dans un div fluide qui change de taille, vous pouvez inclure dans un $ (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) 

Answer 5

Aucune de ces travaillaient pour moi dans TinyMCE v4, donc ma solution était de calculer la hauteur en fonction de la barre d'outils / barre de menu / barre d'état, puis régler 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 pour correspondre à la largeur et la hauteur de la window réelle, puisque l'éditeur viendrait dans une fenêtre contextuelle. Pour détecter les changements et redimensionner, je mets à un rappel:

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

Answer 6

Avec la version 4 et la possibilité d'utiliser la mise en page de FlexBox dans le navigateur je l'ai fait ce qui suit pour obtenir une largeur, une expérience d'édition en hauteur de la div parent.

Il devrait être facile de mettre le fichier css dans un 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 que faire tous les divs nécessaires prennent comme beaucoup 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>

Non jquery ou d'autres dépendances sont nécessaires etd il remplit maintenant les parents 100%.

Answer 7

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

redimensionner l'élément « _ifm » au lieu du « _tbl », depuis le redimensionnement de la « _tbl » n'a pas redimensionner la zone d'édition pour moi. Ensuite, je laisse un peu d'espace pour la barre d'outils et barre d'état en faisant les « _ifr » 85 pixels plus courts alors le conteneur div.

Je devais utiliser setTimeout pour le faire fonctionner, peut-être parce que j'ai une animation qui affiche l'élément conteneur.

Answer 8

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

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

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

2. Ajouter des styles à conteneur auto-redimensionner iframe:

   .mce-tinymce {height: auto; largeur: 100%; position: absolute; gauche: 0; top: 0; bas: 0; }

   .bq-éditeur .mce-conteneur-body {height: 100%; }

   .bq-éditeur .mce-edit-zone {position: absolute; top: 57px; bas: 0; largeur: 100%; hauteur: auto; }

Remarque: J'ai une ligne de barre d'outils, et le haut: 57px; dans .bq-éditeur .mce-edit-zone est padding la barre d'outils.

Answer 9

SyCoDeR est juste, mais je l'ai suivi un chemin un peu différent mais 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 parce que TinyMCE change les ID avec menu / ajouts ou suppressions de barre d'outils. Cela fonctionne, peu importe ce que vous faites avec.

Answer 10

L'enveloppe de iframe (sa finition par _ifr ID) est le premier parent de l'étendue qu'elle a une application comme rôle. Ainsi, pour obtenir l'emballage:

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

Redimensionner 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'))

Answer 11

Aucune de ces solutions a travaillé 100% pour moi. Je avais besoin de la hauteur pour régler lors de l'initialisation et pendant les modifications. Ce que je l'ai fait saisir est la hauteur de l'élément HTML dans le iFrame, puis appliqué la hauteur de l'iFrame avec un 100px supplémentaire.

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

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

sur le changement de noeud (Edits)

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