Wie automatisches ändern der Größe von tinyMCE?

Der Punkt ist, dass TinyMCE erzeugt einen iframe an der Stelle der textarea mit dieser ID: originalID+"_ifr", und eine Tabelle originalID+"_tbl" für die Aufnahme der Steuerelemente und den editor-Bereich.

Zu machen, fluid width:

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

Um fluid Höhe:

Ändern dinamically document.getElementById(id+'_ifr').style.height zu der Höhe, die Sie wollen, durch JS.

Dies ist das Skript, das ich verwende:

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

Können Sie den code und Funktionsaufrufe innerhalb onload und onresize body Veranstaltungen.

InformationsquelleAutor der Antwort igorsantos07

Wenn du tust tiny MCE dynamisch über JS, man kann es timing-Probleme, wo der MCE editor ist noch nicht verfügbar für den style-Anpassungen. Um dies zu bekämpfen, können Sie eine alte Schule timeout.

In diesem Beispiel verwende ich ein "j" namespace JQuery. Wenn Ihr editor in einer Flüssigkeit div Größe ändert, möchten Sie vielleicht auch in ein $(window).resize(Funktion() { }); listener.

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) 

InformationsquelleAutor der Antwort Noel Baron

Mit version 4 und die option zur Verwendung von flexbox-layout im browser habe ich Folgendes zu erhalten, in voller Breite, - Höhe, - Erfahrung im Bearbeiten des übergeordneten div.

Sollte es einfach sein zu setzen, das css in einer Datei, wenn Sie bevorzugen, indem es auf Ihre vorhandenen Formatvorlagen.

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

Die Idee ist, dass es alle benötigten divs nehmen so viel Spalte Platz wie benötigt, zum füllen der Eltern 100%, und Ihr realisiert, indem ein div um deine textarea: <div class="tinycme-full"> <textarea ... /></div>

Kein jquery oder andere Abhängigkeiten benötigt werden, und es füllt nun die Eltern 100%.

InformationsquelleAutor der Antwort Poul K. Sørensen

SyCoDeR ist richtig, aber ich folgte einem etwas anderen Weg, obwohl wahrscheinlich mit den gleichen Ergebnissen.

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

Überarbeitet, da der TinyMCE ändert sich die id ' s mit Menü/Symbolleiste, Ergänzungen oder Streichungen. Das funktioniert, egal, was Sie tun.

InformationsquelleAutor der Antwort liquibyte

Ich bin mit reinen css-Lösung, um dies zu erreichen (tinyMCE 4.0.20).

1. Festlegen, iframe Höhe von 100%:

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

2. Fügen Sie Stile hinzu, um Größe automatisch anpassen, iframe-container:

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

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

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

Hinweis: ich habe eine Symbolleiste Linie und top: 57px; in .bq-editor .mce-edit-Bereich ist die Symbolleiste Polsterung.

InformationsquelleAutor der Antwort SyCoDeR