TinyMCE dans div masqué ne sont pas affichés comme activés lorsque nous mettons la div visible

Question

Je rencontre un problème avec tinyMCE (éditeur WYSIWYG). En fait, j'ajoute la zone de texte à l'intérieur d'un élément HTML, comme un DIV qui possède actuellement l'attribut de style "display: none".

Lorsque je change le style d'affichage DIV en visible, l'éditeur tinyMCE est affiché comme désactivé.

Remarque importante: le paramètre à l'origine du problème est le paramètre "auto_resize "". option. C’est la seule option que je peux activer / désactiver pour que l’éditeur tinyMCE passe en mode édition ou en lecture seule.

Voici mon code:

tinyMCE.init({
    mode: "specific_textareas",
                editor_selector: /(RichTextArea)/, 
                theme: "advanced",
                auto_reset_designmode: true,
                auto_resize:true,
                theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull",
                theme_advanced_buttons2: "",
                theme_advanced_buttons3: "",
                theme_advanced_buttons4: "",
                theme_advanced_more_colors: 0,
                theme_advanced_toolbar_location: "external",
                theme_advanced_toolbar_align: "left"
});

...

<a href="#" onclick='document.getElementById("myHiddenDiv").style.display = "block"; return false;'>Show WYSIWYG</a><br/>
<div id="myHiddenDiv" style="display:none">
    <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
    <textarea class="RichTextArea" id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
        &lt;p&gt;This is the first paragraph.&lt;/p&gt;
        &lt;p&gt;This is the second paragraph.&lt;/p&gt;
        &lt;p&gt;This is the third paragraph.&lt;/p&gt;
    </textarea>
</div>

J'aimerais savoir si quelqu'un a une idée de la façon de résoudre ce problème?

Answer 1

Essayez d'appeler tinyMCE.init (...) après avoir dévoilé le div qui le contient.

Answer 2

Cette question est assez ancienne, mais j'ai également eu ce problème. J'ai corrigé avec des styles en ligne.

<textarea class="tinymce" style="width: 300px; height: 400px"></textarea>

Pour faciliter les choses, je construis ce script simple à faire pour moi avant init ()

$('textarea.tinymce').each(function(){
    $(this).css({
        width: $(this).width(),
        height: $(this).height()
    });
})