Come ridimensionare automaticamente tinyMCE?

Question

Ho un TinyMCE impostato su TextArea e voglio che quest'area dell'editor occupi tutto lo spazio del suo div genitore, sempre.

Ho una funzione JS che ottiene lo spazio corrente e imposta textarea.style.height su di esso, ma quando abilito TinyMCE sembra smettere di funzionare.

Inoltre, l'area di testo ha larghezza:100%;non si ridimensiona tramite il rendering HTML anche quando utilizza TinyMCE.

Qualche idea?

Answer 1

Al giorno d'oggi, è necessario utilizzare il AutoResize plug che viene fornito con TinyMCE. Dovrete chiamare TinyMCE come questo (versione jQuery):

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

Ho fatto l'esperienza, che può essere utile per richiamare manualmente il ridimensionamento nella init_instance_callback per fornire la giusta altezza sul init. Aggiungere questo parametro per le opzioni passate, se avete bisogno di questo:

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

Answer 2

Il punto è che TinyMCE genera un iframe al posto del textarea, con questo ID: originalID + "_ IFR", e un tavolo originalID + "_ TBL" per lo svolgimento dei controlli e l'area di testo dell'editor

.

Per rendere larghezza fluida:

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

Per rendere fluido altezza:

cambiare dinamicamente document.getElementById(id+'_ifr').style.height per l'altezza desiderata, attraverso JS.
Questo è lo script che sto utilizzando per questo:

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

È possibile utilizzare il codice e chiamate di funzione all'interno onload e onresize eventi body.

Answer 3

in TinyMCE 3.4.6, set

width:'100%'

nell'opzione init risolverà il problema.

Answer 4

Se si sta facendo molto piccolo MCE dinamicamente tramite JS, si può incorrere in problemi di temporizzazione in cui l'editor MCE non è ancora disponibile per le regolazioni di stile. Per combattere questo, è possibile utilizzare un vecchio timeout scuola.

In questo esempio, sto utilizzando uno spazio dei nomi "j" per JQuery. Se l'editor è in un div fluido che cambia dimensione, si potrebbe voler includere questo in un $ (window) .resize (function () {}); ascoltatore.

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

Nessuno dei precedenti stavano lavorando per me in TinyMCE v4, quindi la mia soluzione era quella di calcolare l'altezza in base alla barre degli strumenti / menu della barra di bar / stato, quindi impostare l'altezza del redattore, prendendo quelle altezze in considerazione.

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

Nel mio caso, ho voluto la finestra dell'editor in base alla larghezza e l'altezza del window reale, dal momento che l'editor sarebbe venuto fuori in un popup. Per rilevare le modifiche e ridimensionare, ho impostato ad un callback:

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

Answer 6

Con la versione 4 e la possibilità di utilizzare il layout FlexBox nel browser ho fatto quanto segue per ottenere una larghezza, altezza editing esperienza del div genitore.

Dovrebbe essere facile mettere il CSS in un file se si preferisce aggiungerlo ai vostri stili esistenti.

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'idea è che si fanno tutti i div necessari occupano tanto spazio colonna come necessario per riempire il genitore al 100% e la sua fatto mettendo un div intorno al vostro textarea: <div class="tinycme-full"> <textarea ... /></div>

Non jquery o altre dipendenze sono necessari andd ora riempie il genitore al 100%.

Answer 7

Ho avuto lo stesso problema, dopo aver letto questa discussione ho finito con questo codice

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

I ridimensionare l'elemento "_ifm" al posto del "_tbl", dal momento che il ridimensionamento della "_tbl" non ha ridimensionare l'area di modifica per me. Poi lascio un pò di spazio per la barra degli strumenti e barra di stato, rendendo le "_ifr" 85 pixel più brevi quindi il div contenitore.

Ho dovuto usare setTimeout per farlo funzionare, forse perché ho un'animazione che visualizza l'elemento contenitore.

Answer 8

Sto usando la soluzione CSS puro per raggiungere questo obiettivo (TinyMCE 4.0.20).

1. altezza Set iframe al 100%:

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

2. Aggiungi stili di auto-ridimensionamento contenitore IFRAME:

   .mce-TinyMCE {height: auto; width: 100%; position: absolute; a sinistra: 0; top: 0; bottom: 0; }

   .bq-editore .mce-contenitore-body {height: 100%; }

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

Nota: Ho una linea di barra degli strumenti, e top: 57px; in .bq-editor di .mce-edit-zona è padding barra degli strumenti.

Answer 9

SyCoDeR ha ragione ma ho seguito un percorso leggermente diverso anche se probabilmente con gli stessi risultati.

/*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;
}

Revisionato perché TinyMCE cambia gli ID con aggiunte o eliminazioni di menu/barra degli strumenti.Funziona qualunque cosa tu faccia con esso.

Answer 10

L'involucro di iframe (sua finitura ID da _ifr) è la prima madre di arco che ha applicazione come ruolo. Quindi, per ottenere il wrapper:

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

Quindi, per ridimensionare altezza:

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

Per ridimensionare la larghezza

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

Answer 11

Nessuna di queste soluzioni ha lavorato al 100% per me. Avevo bisogno l'altezza per regolare l'inizializzazione e durante le modifiche. Quello che ho fatto è prendere l'altezza dell'elemento HTML nella iFrame, e poi applicato l'altezza al iFrame con una 100px supplementare.

Ecco la mia soluzione: (IMG aggiunto max-width per le immagini responsive)

su di inizializzazione

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

sul cambiamento nodo (modifiche)

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