Wie die automatische Größenanpassung tinyMCE?

Question

Ich habe eine TinyMCE, die über einen TextArea- gesetzt ist, und ich möchte diese Editor-Bereich den ganzen Raum des übergeordneten div ocuppy, allen Zeiten.

Ich habe eine JS-Funktion, die den aktuellen Raum zu bekommen und stellen Sie den textarea.style.height es, aber wenn ich TinyMCE ermöglicht es scheint zu funktionieren.

Auch hat die TextArea- Breite: 100%; Ändern der Größe nicht von HTML-Rendering, wenn es TinyMCE auch ist verwendet wird.

Irgendwelche Ideen?

Answer 1

Heute sollten Sie die Verwendung Autoresize Plugin , die mit tinyMCE kommt. Sie haben tinyMCE wie diese (jQuery-Version) nennen:

$('.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, um manuell die Größenänderung in den init_instance_callback rufen Sie die richtige Höhe zu schaffen, auf init. Fügen Sie diesen Parameter auf den übergebenen Optionen, wenn Sie diese:

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

Answer 2

Der Punkt ist, dass TinyMCE ein iframe in der Stelle des TextArea- erzeugt, mit dieser ID:. OriginalID + „_ IFR“, und eine Tabelle originalID + „_ TBL“ für die Kontrollen Halten und der Editorbereich

Fluid Breite machen:

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

Flüssigkeitshöhe machen:

Ändern dinamically document.getElementById(id+'_ifr').style.height auf die Höhe, die Sie durch JS wollen.
Dies ist das Skript Ich bin für diese Verwendung:

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 Funktionsaufrufe innerhalb onload und onresize body Ereignisse verwenden.

Answer 3

in tinymce 3.4.6, set

width:'100%'

in init-Option wird das Problem lösen.

Answer 4

Wenn Sie kleine MCE tun dynamisch über JS, können Sie in Timing-Probleme laufen, wo der MCE-Editor noch nicht für Stil Anpassungen zur Verfügung. Um dies zu bekämpfen, können Sie eine alte Schule Timeout verwenden.

In diesem Beispiel verwende ich ein „j“ Namespace für JQuery. Wenn Ihr Editor in einer Flüssigkeit div ist die Größe ändert, können Sie dies in einem $ (Fenster) umfassen .resize (function () {}); Zuhö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) 

Answer 5

Keine der oben genannten arbeitet für mich in TinyMCE v4, so meine Lösung die Höhe auf der Symbolleiste / Menüleiste / Statusleiste und legen Sie dann die Höhe des Editors, wobei diese Höhen in Betracht zu berechnen war.

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 das Editor-Fenster die Breite und Höhe des tatsächlichen window übereinstimmen, da der Editor in einem Popup kommen würde. Zur Erkennung von Änderungen und Größe ändern, habe ich dies zu einem Rückruf:

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

Answer 6

Mit der Version 4 und die Option zum Einsatz Flexbox Layout im Browser habe ich die eine volle Breite erhält folgende, Höhe Bearbeitung Erfahrung des Mutter div.

Es sollte einfach sein, die CSS in eine Datei zu setzen, wenn Sie es zu Ihrem bestehenden Stil hinzugefügt bevorzugen.

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 Spaltenraum machen als notwendig, um die Eltern zu 100% zu füllen und seine indem ein div um den Textbereich getan: <div class="tinycme-full"> <textarea ... /></div>

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

Answer 7

Ich hatte das gleiche Problem, nach diesem Thread zu lesen ich mit diesem Code am Ende

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

ich die Größe des „_ifm“ Element anstelle des „_tbl“, da die „_tbl“ Ändern der Größe haben die Bearbeitungsbereich für mich nicht ändern. Dann lasse ich etwas Platz für die Symbolleiste und Statusleiste, indem sie die „_ifr“ 85 Pixel kürzer als der Behälter div.

Ich hatte SetTimeout zu verwenden, damit es funktioniert, vielleicht weil ich eine Animation, die zeigt das Containerelement.

Answer 8

Ich verwende reine CSS-Lösung dieses (tinyMCE 4.0.20) zu erreichen.

1. Set iframe Höhe auf 100%:

   tinyMCE.init ({     Höhe: '100%' })

2. In Stile Auto-Resize iframe Container:

   .mce-tinymce {height: auto; Breite: 100%; Position: absolute; links: 0; top: 0; Unten: 0; }

   .bq-Editor .mce-Container-body {height: 100%; }

   .bq-Editor .mce-edit-Bereich {position: absolute; top: 57px; Unten: 0; Breite: 100%; Höhe: auto; }

Hinweis: Ich habe eine Symbolleiste Linie und top: 57px; in .bq-Editor .mce-edit-Bereich ist Symbolleiste padding.

Answer 9

SyCoDeR Recht ist, aber ich folgte einen etwas anderen Weg aber 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;
}

überarbeitete weil TinyMCE ändert die ids mit Menü / Symbolleiste Ergänzungen oder Streichungen. Dies funktioniert unabhängig davon, was Sie damit machen.

Answer 10

Der Wrapper von iframe (sein ID-Finish von _ifr) ist die erste Mutter der Spanne dass sie die Anwendung als Rolle. Somit Um die Wrapper zu erhalten:

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

So zu Resize Höhe:

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

Zum Ändern der Größe Breite

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

Answer 11

Keine dieser Lösungen gearbeitet 100% für mich. Ich brauchte die Höhe bei der Initialisierung und während der Bearbeitung einzustellen. Was ich tat, ist greift die Höhe des HTML-Elements in der iFrame und angewandt, dann wird die Höhe der iFrame mit einem zusätzlichen 100px.

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

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

auf dem Knoten ändern (Änderungen)

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