Wie kann man die Größe von tinyMCE automatisch ändern?

Ich habe ein TinyMCE, das über einer TextArea gesetzt ist, und ich möchte, dass dieser Editorbereich immer den gesamten Platz seines übergeordneten Div einnimmt.

Ich habe eine JS-Funktion, die den aktuellen Speicherplatz erhält und die textarea.style.height darauf setzt, aber wenn ich TinyMCE aktiviere, scheint es nicht mehr zu funktionieren.

Außerdem hat das Textfeld eine Breite von 100 %; Die Größe wird auch nicht durch HTML-Rendering geändert, wenn TinyMCE verwendet wird.

Irgendwelche Ideen?

Heutzutage sollten Sie die verwenden Plugin zur automatischen Größenänderung das kommt mit tinyMCE. Sie müssen tinyMCE so aufrufen (jQuery-Version):

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

Ich habe die Erfahrung gemacht, dass es hilfreich sein kann, das Resizing manuell in der aufzurufen init_instance_callback um die richtige Höhe bei init bereitzustellen. Fügen Sie diesen Parameter den übergebenen Optionen hinzu, wenn Sie dies benötigen:

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

Der Punkt ist, dass TinyMCE anstelle des Textbereichs einen Iframe mit dieser ID generiert: originalID + “_ifr”, und eine Tabelle originalID + “_tbl”, um die Steuerelemente und den Editorbereich aufzunehmen.

Um flüssige Breite zu machen:

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

So stellen Sie die Flüssigkeitshöhe her:

Dynamisch ändern document.getElementById(id+'_ifr').style.height auf die gewünschte Höhe, durch JS.
Dies ist das Skript, das ich dafür 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";
}

Sie können den Code und die Funktionsaufrufe darin verwenden onload und onresize body Veranstaltungen.

in tinymce 3.4.6 eingestellt

width:'100%'

in der Init-Option wird das Problem lösen.

Wenn Sie Tiny MCE dynamisch über JS ausführen, können Timing-Probleme auftreten, bei denen der MCE-Editor noch nicht für Stilanpassungen verfügbar ist. Um dem entgegenzuwirken, können Sie ein Timeout der alten Schule verwenden.

In diesem Beispiel verwende ich einen “j”-Namespace für JQuery. Wenn sich Ihr Editor in einem fließenden div befindet, das seine Größe ändert, möchten Sie dies vielleicht in ein $(window).resize(function() { }); Hörer.

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) 

Keines der oben genannten Dinge funktionierte für mich in TinyMCE v4, daher bestand meine Lösung darin, die Höhe basierend auf den Symbolleisten/Menüleisten/Statusleisten zu berechnen und dann die Höhe des Editors unter Berücksichtigung dieser Höhen festzulegen.

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

In meinem Fall wollte ich, dass das Editorfenster der Breite und Höhe des tatsächlichen entspricht window, da der Editor in einem Popup erscheinen würde. Um Änderungen zu erkennen und die Größe zu ändern, setze ich dies auf einen Rückruf:

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

Mit Version 4 und der Option, das Flexbox-Layout im Browser zu verwenden, habe ich Folgendes getan, um eine vollständige Breiten- und Höhenbearbeitungserfahrung des übergeordneten div zu erhalten.

Es sollte einfach sein, das CSS in eine Datei zu packen, wenn Sie es vorziehen, es zu Ihren vorhandenen Stilen hinzuzufügen.

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 alle benötigten Divs so viel Spaltenplatz einnehmen, wie benötigt wird, um das übergeordnete Element zu 100% zu füllen, und dies geschieht, indem ein Div um Ihren Textbereich gelegt wird: <div class="tinycme-full"> <textarea ... /></div>

Es werden keine jquery oder andere Abhängigkeiten benötigt und es füllt jetzt das übergeordnete Element zu 100% aus.

Ich hatte das gleiche Problem, nachdem ich diesen Thread gelesen hatte, landete ich bei diesem Code

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

Ich ändere die Größe des „_ifm“-Elements anstelle des „_tbl“, da die Größenänderung des „_tbl“ den Bearbeitungsbereich für mich nicht verändert hat. Dann lasse ich etwas Platz für die Symbolleiste und die Statusleiste, indem ich das “_ifr” 85 Pixel kürzer mache als das Container-Div.

Ich musste setTimeout verwenden, damit es funktioniert, vielleicht weil ich eine Animation habe, die das Containerelement anzeigt.