Pourquoi mon TinyMCE caché textarea agir?

J'ai environ 7 textareas sur une page web, ils sont riches éditeurs de texte à l'aide de TinyMCE. Cependant, au chargement de la page seulement 1 d'entre eux est visible et le reste de cachés. L'utilisateur peut cliquer sur un "show", lien qui permettrait d'afficher le reste des textareas un par un.

Cependant, j'ai un problème bizarre. Tous les textareas sont configurés comme ceci:

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

Toutefois, seule la textarea affiche au chargement de la page est la taille complète je veux qu'il soit. Le reste textareas sont vraiment petit quand je leur montre. Donc je pense que peut-être ils ne sont pas rendus parce qu'ils sont cachés au chargement de la page.

Comment puis-je y remédier?

Je pense que je vais avoir ce problème. Les textareas sont mis en display:none et TinyMCE semble être ignorant leur taille, à moins que j'ai spécifié dans la balise.
Il fixe. Voir la réponse.

OriginalL'auteur Click Upvote | 2009-03-26

  1. 7

    Essayez d'ajouter un peu de CSS pour ces zones de texte qui sont cachés.

    Par exemple, l'utilisation

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

    Je pense que j'ai couru dans cette, où TinyMCE CSS remplace certains de la CSS par défaut de comportement. J'ai fini par avoir à re-remplacer", et, finalement, édité TinyMCE css pages.

    OriginalL'auteur Shalom Craimer

  2. 6

    Je pense que c'est un MCE bug, ou au moins une fonctionnalité qui MCE manque.

    Depuis que j'ai voulu le style de ma zone de saisie dans le CSS, pas en HTML (beurk), j'ai essayé

    visibility: hidden;

    au lieu de

    display: none;

    et tout a fonctionné à nouveau.

    Je crois que ce dernier provoque l'élément à maximum de l'espace, qui voyages sur la MCE code qui détecte la largeur et la hauteur de l'élément.

    OriginalL'auteur Artelius

  3. 2

    Lors du chargement TinyMCE avec jQuery, ce problème peut être résolu en tant que tel:

    1 - Sur votre textarea, spécifier une hauteur dans la ligne de l'attribut style:

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

    2 - ajout d'une fonction de rappel lors de l'instanciation d'un éditeur TinyMCE. par exemple, 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 - Régler la hauteur de vos Éditeurs dans le tinymceLoaded fonction:

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

    OriginalL'auteur Nick G

  4. 1

    Sans avoir un peu plus de détails au sujet de votre installation et de la façon dont vous êtes en train de faire la vaious afficher/cacher les fonctionnalités, il est difficile de donner une réponse définitive.
    Je peux jeter quelques réflexions générales, mais:

    • - Ils s'afficher correctement lorsque vous n'en avez pas les cacher au chargement de la page? Que donnerait un definative réponse à quel point le bug de l'intervenant.
    • Lorsque vous mettez le point de vue de la textarea pouvez-vous explicitement définir la ligne/col attributs en même temps?
    • Pouvez-vous utiliser les css (avec peut-être !important) pour définir textarea largeur et la hauteur que pour tester si cela a un effet?

    OriginalL'auteur Steerpike

  5. 1

    De TinyMCE caché à l'intérieur de la div ne sont pas affichés comme étant activé lorsque nous avons mis l'div visible, l'utilisateur slolife réponse qui m'a aidé:

    Essayez d'appeler tinyMCE.init(...) après avoir afficher le div contenant.

    OriginalL'auteur periklis

  6. 1

    J'ai eu le même problème où la hauteur de l'caché textarea contrôles qui ont été convertis en TinyMCE éditeurs étaient trop petits. Réglage visibility à none travaillé, mais laisse un grand vide à sa place.

    La solution suivante a bien fonctionné pour moi:

    • Ne cachez pas votre textarea contrôles d'abord au chargement de la page
    • Au lieu de cela, régler tous de votre TinyMCE init config comme suit:
    tinyMCE.init({ 
... 
init_instance_callback : "onInstanceInit" 
});
    • Dans votre onInstanceInit fonction, de masquer le initialisé TinyMCE éditeur dynamiquement
    • Si vous montrez cet éditeur par la suite, la hauteur sera de nouveau normal, tout comme il n'a jamais été caché

    OriginalL'auteur Peter

  7. 0

    Une autre raison pour ce qui est caché, c'est quand vous supprimer des éléments dans le dom avec tinymce initialisé sur eux. Vous devez supprimer tinymce partir de cet élément premier, ce qui vous évitera de comportement bizarre lors de l'initialiser de nouveaux tinymce éléments.

    Donc par exemple :

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

    .

    OriginalL'auteur Jonathan Banon

  8. 0

    Si vous utilisez la version de production de TinyMCE, vous avez probablement oublié de copier les dossiers que tinymce.min.js besoins. Vous avez besoin d'avoir des dossiers langs, plugins, peaux et thèmes dans le même dossier que votre tinymce.min.js fichier.

    OriginalL'auteur Dejv