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

Mit Version 4 und der Option, Flexbox-Layout im Browser zu verwenden, habe ich Folgendes getan, um die volle Breite und Höhe des übergeordneten Divs bearbeiten zu können.

Es sollte einfach sein, das css in eine Datei zu packen, wenn Sie es zu Ihren bestehenden Stilen hinzufügen möchten.

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 Platz in der Spalte wie nötig, um die übergeordnete 100% zu füllen und seine getan, indem Sie ein div um Ihre textarea: <div class="tinycme-full"> <textarea ... /></div>

Es werden keine Jquery- oder andere Abhängigkeiten benötigt, undd es füllt nun das übergeordnete Element zu 100 % aus.

Answer 2

Ich hatte das gleiche Problem, nach der Lektüre dieses Threads landete ich mit 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"-Elements, da die Größenänderung des "_tbl"-Elements den Bearbeitungsbereich nicht verändert hat. Dann lasse ich etwas Platz für die Symbolleiste und die Statusleiste, indem ich das Element "_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.

Answer 3

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

1. Höhe des iframe auf 100 % setzen:

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

2. Hinzufügen von Stilen zur automatischen Größenanpassung des Iframe-Containers:

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

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

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

Nota: Ich habe eine Zeile in der Symbolleiste, und oben: 57px; in .bq-editor .mce-edit-area ist toolbar padding.

Answer 4

SyCoDeR hat Recht, aber ich bin einen etwas anderen Weg gegangen, wenn auch 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, weil TinyMCE die Id's bei Hinzufügen oder Löschen von Menüs/Symbolleisten ändert. Dies funktioniert, egal was Sie damit tun.

Answer 5

Dies ist eine alte Frage, aber anscheinend erregt sie heute (zweites Halbjahr 2020) immer noch viel Aufmerksamkeit.

Leider, mit der Veröffentlichung des TinyMCE v5, die meisten der Workarounds fand ich einfach nicht mehr funktionieren. Ich bin sicher, dass sie einmal gearbeitet, aber jeder TinyMCE Release scheint neue " bringen Zwänge ", die diese Umgehungslösungen lahmlegen...

Ohne eine Diskussion daraus machen zu wollen, glaube ich, dass es die Kosten der Evolution sind. Für ein altes Produkt wie TinyMCE ist es unglaublich zu sehen, dass es immer noch da ist und sich weit über die Konkurrenz erhebt. Es ist bei weitem eine der effizientesten und flexibelsten Lösungen für alle Umgebungen, einschließlich mobiler und für diese neuen Sprachen und Frameworks, die seit geboren (was in letzter Zeit ein Trend zu sein scheint, mit neuen kommen aus dem Nichts jeden Tag).

Mit diesem Gedanken im Hinterkopf und nach so vielen (fehlgeschlagenen) Versuchen, die meisten der vorgeschlagenen Lösungen zum Laufen zu bringen, beschloss ich, mich mit dem Quellcode (TinyMCE v5.4) zu beschäftigen, um ihn besser zu verstehen. Was ich fand, war ein viel besseres Produkt insgesamt, und dass die Lösung, die jeder gesucht hat, ist viel einfacher zu implementieren, als ich erwartet hatte.

Ohne weitere Verzögerung, hier meine Lösung, die einfach funktioniert. Sie implementiert einen Editor, der den gesamten Dokumentbereich (oder was auch immer Sie wollen) einnimmt, der WILL die Größe mit dem Browser zu ändern, was KEIN Skript, KEINEN Hack und KEINEN Trick erfordert, der Cross-Browsing-Probleme verursachen könnte. So geht's:

1. Geben Sie Ihrem <html> y <body> DOM-Objekte die fehlenden Eigenschaften der Größe und passen Sie die Abstände entsprechend Ihren Bedürfnissen an:

   html, body { width : 100%; height : 100%; margin : 0 !important; padding : 0 !important; overflow : hidden; / Required if you want to have the editor taking the entire page. / / Otherwise, set as you need it. / }

2. TinyMCE schlägt die <textarea> eingebettet werden in eine <form> Objekt. Unabhängig davon, ob Sie es wie vorgeschlagen verwenden oder nicht, geben Sie ihm einfach eine ID und die folgenden CCS-Eigenschaften (in meinem Fall ist es eingestellt als <form method="post" id="editorBase"> ):

   editorBase {

   display : block !important; width : 100% !important; height : 100% !important; }

3. In der TinyMCE-Initialisierung fügen Sie die folgenden Einstellungen hinzu oder ändern Sie sie:

   tinymce.init({ // Required Settings: width : '100%', // Note value is set as "string". height : '100%', // Note value is set as "string". resize : false, // Suggestion: disable the statusbar resizing. :)

   // Suggested Settings: toolbar_sticky : true, // Keep the menu and tollbar in a fixed position . toolbar_location : 'top', // You can try 'top', 'bottom' or 'auto'. toolbar_mode : 'floating', // It is simply a button behavior settings. // Options are: 'floating', 'sliding', 'scrolling', or 'wrap'.
   });

4. Doch in der TinyMCE-Initialisierung Einstellungen, finden Sie die plugins Artikel und entfernen die autoresize (das ist der wichtigste Schritt von allen!).

5. Erledigt! Probieren und testen Sie es aus! (YES! Es ist alles fertig!)

Mit diesen einfachen Einstellungen können Sie den Editor an jedes Design anpassen. Fühlen Sie sich frei, ihn nach Bedarf anzupassen. Vergessen Sie nur nicht, die Option width und die height Eigenschaften in der TinyMCE-Initialisierung Einstellungen als Zeichenketten, und halten Sie sie mit den CSS-Einstellungen für die <form> .

Der Grund für die Verwendung von Zeichenketten in der width y height Eigenschaften der TinyMCE-Initialisierung Einstellungen anstelle von numerischen Werten zu verwenden, ist, dass Sie "%", "em", "pt" usw. verwenden können. Andernfalls würde die vorgestellte Lösung niemals funktionieren.

Ein weiterer Trick, um das Ganze noch übersichtlicher zu gestalten, ist die Einstellung des Editors als grenzenlose Haut (eine Funktion, die nur in der " professionell " Version von TinyMCE). Nein, es ist nicht eine hacken. Es handelt sich um eine einfache Anpassung des CSS und ist durch die EULA und die Lizenzierung von TinyMCE vollständig erlaubt. Fügen Sie einfach die folgende CSS zu Ihrer Seite Stylesheet und es genießen eine randlose Editor kostenlos:

.tox-tinymce { border:none !important; }

Einfacher geht es nicht.

Viel Spaß beim Codieren!