Warum funktioniert mein TinyMCE-Verstecktext nicht?

Question

Ich habe etwa 7 textarea s auf einer Webseite, alle von ihnen sind Rich-Text-Editoren mit TinyMCE. Beim Seitenaufbau ist jedoch nur eine von ihnen sichtbar und der Rest ist versteckt. Der Benutzer kann auf einen "Zeige" -Link klicken, der die übrigen Textfelder nacheinander anzeigt.

Allerdings habe ich ein seltsames Problem. Alle textarea s sind Setup wie folgt aus:

<textarea cols="40" rows="20"></textarea> 

jedoch nur die textarea beim Laden der Seite angezeigt wird, die in voller Größe ich will es sein. Die restlichen textarea s sind wirklich klein, wenn ich sie zeige. Also denke ich, dass sie vielleicht nicht gerendert werden, weil sie beim Laden der Seite versteckt sind.

Wie kann ich das beheben?

Answer 1

Versuchen Sie CSS zu versteckten Textareas hinzuzufügen.

Zum Beispiel verwenden

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea> 

Ich glaube, ich in diese lief, wo CSS TinyMCE ist ein Teil des Standard-CSS-Verhalten außer Kraft setzt. Ich musste es schließlich "überschreiben" und schließlich die css-Seiten des TinyMCE bearbeiten.

Answer 2

Ohne ein paar mehr Details über Ihre tatsächliche Einrichtung und wie Sie die vielfältigen Anzeige/Verbergen-Funktionalität tun, ist es schwer, eine endgültige Antwort zu geben. Ich kann ein paar allgemeinen Gedanken wirft allerdings aus:

• Haben sie machen richtig, wenn man sie nicht auf Last Seite verbergen? Das würde eine definitive Antwort darauf geben, an welchem ​​Punkt der Fehler auftritt.
• Wenn Sie die Ansicht des Textfelds umschalten, können Sie explizit die Zeilen-/Spaltenattribute gleichzeitig setzen?
• Können Sie css (vielleicht mit! Wichtig) verwenden, um Textbreite und -höhe festzulegen, als zu testen, ob das Auswirkungen hat?

Answer 3

Ich denke, das ist ein MCE-Bug, oder zumindest eine Funktion, die MCE fehlt.

Da wollte ich mein Eingabefeld in CSS stylen, nicht in HTML (igitt) Ich

versuchte

visibility: hidden; 

statt

display: none; 

und alles funktionierte wieder.

Ich glaube, dass Letzteres bewirkt, dass das Element keinen Platz einnimmt, was den MCE-Code auslöst, der die Breite und Höhe des Elements erkennt.

Answer 4

Wenn TinyMCE mit jQuery geladen wird, kann dieses Problem als solches gelöst werden:

1- Auf dem Textfeld, eine Höhe im Inline-Stil-Attribute angeben:

<textarea style="height:200px;" class="tinymce" name="myfield"></textarea> 

2- eine Rückruffunktion hinzufügen beim Instanziieren eines TinyMCE-Editors. z.B.tinymceLoaded

$('textarea.tinymce').tinymce({ 
    // Location of TinyMCE script 
    script_url : 'PATH_TO_TINYMCE.js', 

    // General options ... 
    // Theme options... 

    // callback function 
    init_instance_callback : "tinymceLoaded" 
}); 

3- die Höhe des Editors in der tinymceLoaded Funktion Set:

function tinymceLoaded(inst){ 
    // get the desired height of the editor 
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0 
    // Lets use the inline style text to solve this problem 
    if(height == 0){ 
     height = $('#' + inst.editorId).css('height'); // 200px 
     height = height.replace(/[^0-9]/g, ""); // remove all non-numeric characters to isolate the '200' 
    } 

    // set the height of the hidden TinyMCE editor 
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'}); 
} 

Answer 5

Von TinyMCE inside hidden div are not displayed as enabled when we put the div visible, slolife Benutzer Antwort half mir:

Versuchen tinyMCE.init Aufruf (. ..) nachdem du das enthaltene div eingeblendet hast.

Answer 6

Ich hatte das gleiche Problem, wo die Höhe der versteckten Textarea-Steuerelemente, die in TinyMCE-Editoren konvertiert wurden, zu klein waren. Einstellung visibility bis none funktioniert, aber hinterlässt einen großen leeren Platz an seiner Stelle.

Die folgende Lösung gut für mich gearbeitet:

• Verstecken Sie sich nicht Ihre TextArea- Kontrollen zunächst auf Seite Last
• Stattdessen alle Ihre TinyMCE init Config wie folgt festgelegt:

 
tinyMCE.init({ 
     ... 
     init_instance_callback : "onInstanceInit" 
}); 

• In Ihrer onInstanceInit Funktion, verstecken Sie den initialisierten TinyMCE Editor dynamisch
• Wenn Sie diesen Editor danach zeigen, wird die Höhe wieder normal sein, so wie es nie

Answer 7

Ein weiterer Grund für die verborgene Sache versteckt war, wenn Sie Elemente aus dem Dom mit tinymce auf sich initialisiert entfernen. Sie müssen zuerst tinymce von diesem Element entfernen, so dass Sie seltsames Verhalten vermeiden, wenn Sie neue tinymce Elemente initialisieren.

So z.Bsp:

removeElementWithTinymce = function(elementToRemove){ var parent = elementToRemove.parentNode; tinymce.remove(elementToRemove.getAttribute('id')); parent.removeChild(elementToRemove); };

Das ist es.

Answer 8

Wenn Sie die Produktionsversion von TinyMCE verwenden, haben Sie wahrscheinlich vergessen, Ordner zu kopieren, die tinymce.min.js benötigt. Sie müssen Ordner haben langs, Plugins, Häute und Themen im selben Ordner wie die tinymce.min.js Datei.