it-swarm.com.de

TinyMCE Breite und Höhe ungehorsam!

Gemäß der (widersprüchlichen) Dokumentation von TinyMCE nimmt der Editor die Größe des Textbereichs (oder eines anderen Elements) an, das er ersetzt. Außerdem können Sie die Größe des Editors festlegen, indem Sie { height: '123', width: '123' } in der init-Methode angeben.

Ich habe BEIDE ausprobiert und bekomme immer noch nur ein Ergebnis - der Editor ändert seine Größe nach (wie er sich daran erinnert, ist jenseits von mir), auf das, was der Benutzer zuletzt geändert hat.

24
Jimbo

Ich weiß alles darüber, es ist sehr ärgerlich.

Indem ich dies zu einer geladenen CSS-Datei hinzufüge, wurde die Breite für mich festgelegt (ich habe es nur in die globale CSS-Datei eingefügt, nicht in eine der TinyMCE-CSS-Dateien, die ich nicht mit height getestet habe):

.mceEditor > table {
    width:/* my width */ !important;
}

Dies würde alle Fälle betreffen, was in meinem Fall in Ordnung war. Sie können die Symbolleiste selbst mit .mceToolbar anvisieren.

Sie möchten do , dass TinyMCE die Größe des Textbereichs ändert, damit er für alle Symbolleistensymbole geeignet ist.

18
Wesley Murch

Es speichert die letzte Größe aufgrund der Designeinstellungen. Sie können es deaktivieren, indem Sie Folgendes verwenden

$('textarea.tinymce').tinymce({
    theme_advanced_resizing: true,
    theme_advanced_resizing_use_cookie : false,
27
Stuart

Hier ist mein Fix. 
Es funktioniert auch für mehrere Instanzen von TinyMCE-Editoren (init () mit der Eigenschaft 'height', die nur für die erste Instanz gilt. Daher ist es eine Problemumgehung, um eine feste oder minimale Höhe des Editorfelds zu erreichen).

.mceEditor td.mceIframeContainer iframe {
    min-height: 350px !important;
}
.mceEditor table {
    height: auto !important;
}
3
Kamil Bednarz

Ja, das ist sehr nervig. Ich habe meine eigene Funktion geschrieben, um die Höhe an die angegebene Eingabe anzupassen. Sie können es ändern, um Ihre Höhe/Breite nach Ihren Wünschen einzustellen:

    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = currentfr.Document.body.scrollHeight;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },
1
Thariama
tinyMCE.init({
        mode : "exact",
         .....

modus: "Genau" deaktiviert die Fähigkeit, die Größe des Gitters durch Ziehen zu ändern

1
Gihan Lasita

Ich fand den TinyMCE-Textbereich (in meinem Thema '.mceContentBody' genannt) zu klein und unpraktisch im neuen Post-Content-Bereich. In meinem Design gibt es eine CSS-Datei, die als Editor-Stil bezeichnet wird. Ich habe die Breite geändert (auf 98%). Da TinyMCE Cookies verwendet, um sich an die Größe des Editors zu erinnern, blieben die CSS-Änderungen nicht erhalten. Nach CLEARING MYCHE BROWSERS CACHE wurden die Änderungen der CSS-Breite/-Ränder wirksam. Endlich. Gah.

0
Commandrea

Fügen Sie mit tinymce.init eine 'body_id' hinzu und verwenden Sie diese ID in 'content_css', um dem Editor das gewünschte css-Verhalten zu geben. So wie:

tinymce.init({
    selector: "textarea",
    content_css: '/css/app.css',
    body_id: 'new-journal-editor'
});

Und dann in app.css:

#new-journal-editor {
    height: 123px;
    width: 123px;
}
0
gpkamp

Obwohl es hier viele gute Vorschläge gibt, fand ich die Antwort durch das Lesen der Frage. Es gibt KEIN Problem mit der Höhe oder Breite. Warum also all diese Probleme mit CSS oder Schreibfunktionen umgehen, funktioniert die Methode in den Dokumenten.

Die ursprüngliche Herausforderung bestand darin, die Größe zu ändern. Der Autor hat nie gesagt, dass die Höhe oder Breite nicht funktioniert. Er hat einfach nicht das gemacht, was er erwartet hat - er wurde nur wie folgt angegeben: 

"Die Größe des Editors ändert sich dahingehend (wie er sich nicht mehr erinnert) an das, was der Benutzer zuletzt geändert hat."

Saidul Islam beantwortete die Frage richtig und um noch einen Schritt weiter zu gehen, fuhr Stuart fort, zu beschreiben, wie die Kekse deaktiviert werden können. Wenn Sie die Höhe und Breite einstellen müssen, tun Sie dies in init () und machen Sie fertig. Sie können hier mehr lesen:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

Die Größenanpassung des Eingabebereichs in Höhe und Breite funktioniert wie unten beschrieben.

tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});
0
user1946891

Ich habe festgestellt, dass eine enthaltende Tabelle Breiten erzwungen hat, und auch die Symbolsätze sind Td-Werte, so dass sie auf ein Minimum reduziert werden. Wenn Sie also viele Symbole in einer einzigen Reihe haben, kann dies die gesamte Breite beeinträchtigen.

Eine Art verwandter SO - Frage von mir war letztendlich ziemlich auf Ihr Problem bezogen: Können Sie td Elemente konsistent schweben?

0
danjah

ich setze Breite und Höhe für den Editorbereich wie folgt

<style>
#content{width: 620px; height: 500px;} 
</style>

<textarea name="content" id="content" cols="50" rows="15"></textarea>
0
Gihan Lasita

Ich stehe vor demselben Problem, aber am Ende mache ich das

#tinymce-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}
0
Abdalla Arbab