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

Der Wrapper von iframe (seine ID endet mit _ifr) ist das erste übergeordnete Element von span, das die Anwendung als Rolle hat. So, Um den Wrapper zu erhalten:

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

Also die Höhe anpassen:

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

So ändern Sie die Breite

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

Answer 2

Keine dieser Lösungen hat bei mir zu 100 % funktioniert. Ich musste die Höhe bei der Initialisierung und während der Bearbeitung anpassen. Was ich tat, ist greifen die Höhe des HTML-Elements in der iFrame, und dann die Höhe auf die iFrame mit einem zusätzlichen 100px angewendet.

Hier ist meine Lösung: (img max-width für responsive Bilder hinzugefügt)

bei der Initialisierung

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

bei Knotenänderung (Bearbeitungen)

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