Wie kann die Größe von tinyMCE automatisch angepasst werden?

Question

Ich habe eine TinyMCE, die über eine TextArea gesetzt ist, und ich möchte, dass dieser Editor-Bereich alle den Raum der übergeordneten div, alle Zeiten ocuppy.

Ich habe eine JS-Funktion, die den aktuellen Raum zu erhalten und die textarea.style.height, um es zu setzen, aber wenn ich TinyMCE aktiviert es scheint zu stoppen arbeiten.

Außerdem hat die Textarea eine Breite von 100%; sie wird nicht durch HTML-Rendering angepasst, wenn TinyMCE verwendet wird.

Irgendwelche Ideen?

Answer 1

Heutzutage sollten Sie die Autoresize-Plugin die mit tinyMCE geliefert wird. Sie müssen tinyMCE wie folgt 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, die Größenanpassung manuell in der init_instance_callback um die richtige Höhe bei init zu erreichen. Fügen Sie diesen Parameter zu den übergebenen Optionen hinzu, wenn Sie dies benötigen:

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

Answer 2

Der Punkt ist, dass TinyMCE einen iframe anstelle des Textbereichs erzeugt, mit dieser ID: originalID+"_ifr", und eine Tabelle originalID+"_tbl" zur Aufnahme der Steuerelemente und des Editorbereichs.

Zur Herstellung einer flüssigen Breite:

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

Für eine flüssige Höhe:

Ändern Sie dinamisch document.getElementById(id+'_ifr').style.height durch JS auf die gewünschte Höhe bringen.
Das 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 in onload y onresize body Veranstaltungen.

Answer 3

In tinymce 3.4.6, setzen

width:'100%'

in der Option init löst das Problem.

Answer 4

Wenn Sie winzige MCE dynamisch über JS tun, können Sie in Timing-Probleme, wo die MCE-Editor ist noch nicht verfügbar für Stil Anpassungen laufen. Um dies zu bekämpfen, können Sie eine alte Schule Timeout verwenden.

In diesem Beispiel verwende ich einen "j" Namespace für JQuery. Wenn sich Ihr Editor in einem flüssigen Div befindet, das die Größe ändert, können Sie dies in einem $(window).resize(function() { }); Listener einschließen.

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

Keiner der oben genannten waren für mich in TinyMCE v4 arbeiten, so dass meine Lösung war es, die Höhe auf der Grundlage der Symbolleisten / Menüleiste / Statusleiste zu berechnen, und dann die Höhe des Editors, unter Berücksichtigung dieser Höhen eingestellt.

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 Editor-Fenster der Breite und Höhe der tatsächlichen window da der Editor in einem Popup-Fenster erscheinen würde. Um Änderungen zu erkennen und die Größe zu ändern, setze ich dies auf einen Callback:

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