Warum ist mein TinyMCE versteckte textarea handeln?

Habe ich über 7 textareas auf einer web-Seite, alle von Ihnen sind rich-text-Editoren mit TinyMCE. Jedoch beim laden der Seite nur 1 von Ihnen ist sichtbar und der rest ausgeblendet. Die Benutzer können auf eine 'show' - link angezeigt, und die verbleibenden Texteingabefelder eins nach dem anderen.

Allerdings habe ich ein seltsames problem. Alle textareas sind wie folgt aufgebaut:

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

Jedoch nur die textarea angezeigt, die beim laden der Seite wird die volle Größe, die ich will. Die restlichen textareas sind wirklich klein, wenn ich Ihnen zeige. Also ich denke, dass vielleicht Sie sind nicht gerendert, weil Sie verborgen sind, die beim laden der Seite.

Wie kann ich Abhilfe schaffen?

  • Ich denke, ich bin mit diesem problem. Die Texteingabefelder sind set auf display:none und TinyMCE scheint zu ignorieren, die Ihrer Größe, es sei denn, ich geben Sie es richtig in den tag.
  • Fixiert es. Siehe auch Antwort.
InformationsquelleAutor Click Upvote | 2009-03-26
  1. 7

    Versuchen Sie, einige CSS Texteingabefelder, die versteckt sind.

    Verwenden Sie zum Beispiel

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

    Ich glaube, ich lief in dieses, wo der TinyMCE-CSS überschreibt einige der Standard-CSS-Verhalten. Ich endete mit "re-override", und schließlich bearbeitet der TinyMCE css-Seiten.

    InformationsquelleAutor Shalom Craimer
  2. 6

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

    Da wollte ich im Stil meiner input box in CSS, nicht HTML (igitt) habe ich versucht

    visibility: hidden;

    statt

    display: none;

    und alles funktionierte wieder.

    Ich glaube, dass letzteres bewirkt, dass das element zu nehmen bis kein Platz, die Ausflüge auf die MCE-code, der erkennt die Breite und Höhe des Elements.

    InformationsquelleAutor Artelius
  3. 2

    Beim laden von TinyMCE mit jQuery kann dieses problem gelöst werden, wie Z:

    1 - Auf Ihrer textarea, geben Sie eine Höhe in der inline-style-Attribut:

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

    2 - fügen Sie eine callback-Funktion, die beim instanzieren eines TinyMCE-editor. 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 - Legen Sie die Höhe Ihrer Redaktion in der tinymceLoaded Funktion:

    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'});
}
    InformationsquelleAutor Nick G
  4. 1

    Ohne ein paar mehr Einzelheiten zu Ihrem aktuellen setup und wie du tust den vaious - /ausblenden von Funktionen es ist schwer, eine definitive Antwort geben.
    Ich kann werfen ein paar Allgemeine Gedanken heraus, obwohl:

    • Tun Sie ordnungsgemäß gerendert, wenn Sie verstecken sich nicht, Sie auf die Seite laden? Das wäre eine definative Antwort für an welchem Punkt die bug ' s auftreten.
    • Beim Umschalten der Ansicht der textarea kann man ausdrücklich festlegen, die row/col-Attribute zur gleichen Zeit?
    • Können Sie mit css (vielleicht mit !wichtig) zu setzen textarea-Breite und-Höhe, als um zu testen, ob das einen Effekt hat?
    InformationsquelleAutor Steerpike
  5. 1

    Vom TinyMCE innen hidden div nicht angezeigt werden aktiviert, wenn wir das div sichtbar, Benutzers slolife Antwort hat mir geholfen:

    Versuchen Sie den Aufruf von tinyMCE.init(...) nachdem Sie die blenden mit div.

    InformationsquelleAutor periklis
  6. 1

    Habe ich das gleiche Problem, wo die Höhe der versteckten textarea-Steuerelemente, die konvertiert wurden, in der TinyMCE-Editoren zu klein waren. Einstellung visibility zu none gearbeitet, sondern hinterlässt einen großen leeren Platz an seiner Stelle.

    Folgende Lösung, die gut für mich gearbeitet:

    • Verbirg nicht dein textarea-Steuerelemente zunächst auf die Seite laden
    • Legen Sie stattdessen alle Ihre TinyMCE init config wie folgt:
    tinyMCE.init({ 
... 
init_instance_callback : "onInstanceInit" 
});
    • In Ihrem onInstanceInit Funktion, ausblenden initialisiert TinyMCE-editor dynamisch
    • Wenn Sie zeigen, dieser editor danach, die Höhe wird wieder normal so wie es war nie versteckt
    InformationsquelleAutor Peter
  7. 1

    Wenn Sie die Produktion version des TinyMCE, Sie wahrscheinlich vergessen, zu kopieren, Ordner tinymce.min.js muss. Sie müssen auf den Ordner langs, plugins, skins und Themen in den gleichen Ordner wie Ihre tinymce.min.js Datei.

    InformationsquelleAutor Dejv
  8. 0

    Anderen Grund für das was verborgen ist, wenn Sie entfernen von Elementen aus der dom mit tinymce initialisiert auf Sie. Sie müssen entfernen tinymce aus diesem element zuerst, so vermeiden Sie ein komisches Verhalten beim initialisieren von neuen tinymce Elemente.

    Also zum Beispiel :

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

    Das ist es.

    InformationsquelleAutor Jonathan Banon
Schreibe einen Kommentar